/**
 * Tamween design system.
 * Original design — do not copy third-party layouts.
 */

:root {
	--tw-bg: #ffffff;
	--tw-bg-soft: #f4f6f7;
	--tw-surface: #fbfcfc;
	--tw-line: #e2e8ec;
	--tw-line-soft: #eef2f4;
	--tw-text: #12212b;
	--tw-muted: #5f7480;
	--tw-accent: #0e7c86;
	--tw-accent-dark: #0a5c64;
	--tw-accent-soft: #e3f1f2;
	--tw-radius: 10px;
	--tw-radius-sm: 6px;
	--tw-container: 1280px;
	--tw-font: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
	--tw-heading: 800;
}

body {
	font-family: var(--tw-font) !important;
	background: var(--tw-bg);
	color: var(--tw-text);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.tw-container {
	max-width: var(--tw-container);
	margin-inline: auto;
	padding-inline: 16px;
}

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

img {
	max-width: 100%;
}

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

.tw-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--tw-bg-soft);
	border-bottom: 1px solid var(--tw-line);
}

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

.tw-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
	padding-block: 8px;
}

/* brand row */
.tw-brand {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-shrink: 0;
}

.tw-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tw-logo-mark {
	display: block;
	height: 34px;
	width: auto;
	flex-shrink: 0;
}

.tw-logo-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	white-space: nowrap;
	min-width: 0;
}

.tw-logo-ar {
	font-size: 20px;
	font-weight: 800;
	color: var(--tw-text);
	letter-spacing: 0;
}

.tw-logo-en {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--tw-accent);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-top: 3px;
}

/* search */
.tw-search {
	flex: 1;
	min-width: 0;
}

.tw-search-box {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: 1px;
	padding-inline-start: 12px;
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tw-search-box:focus-within {
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 3px var(--tw-accent-soft);
}

.tw-search-box i {
	font-size: 18px;
	color: var(--tw-muted);
	flex-shrink: 0;
}

.tw-search-box:focus-within i {
	color: var(--tw-accent);
}

.tw-search-box input {
	border: none;
	background: transparent;
	outline: none;
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--tw-text);
}

.tw-search-box input::placeholder {
	color: var(--tw-muted);
}

.tw-search-go {
	flex-shrink: 0;
	align-self: stretch;
	border: 0;
	border-inline-start: 1px solid var(--tw-line);
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding-inline: 20px;
	cursor: pointer;
	transition: background 0.18s ease;
}

.tw-search-go:hover {
	background: var(--tw-accent-dark);
}

/* actions */
.tw-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.tw-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tw-text);
}

.tw-cart i {
	font-size: 24px;
}

.tw-cart-count {
	position: absolute;
	top: -6px;
	inset-inline-start: 14px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ef4444;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

.tw-sep {
	width: 0.5px;
	height: 24px;
	background: #e4e4e7;
}

.tw-lang {
	font-size: 13px;
	color: var(--tw-text);
	white-space: nowrap;
}

.tw-signup {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tw-text);
	white-space: nowrap;
}

/* mobile search (hidden desktop) */
.tw-search-mobile {
	display: none;
	padding-bottom: 12px;
}

/* ============ Homepage sections ============ */

.tw-main {
	padding-top: 16px;
}

/*
 * Homepage is category-first: a promo band, the thirteen real departments as a
 * grid, then browsable Ninja sub-department rails.
 *
 * Every rule is scoped under `.tw-home` so nothing here can leak into the shop,
 * category, product, header or footer templates.
 *
 * Tile artwork is 384x447 (0.86). Ninja crops those tiles into fixed 148px-tall
 * scroll rows; here the departments keep the native ratio in a responsive grid
 * and the rails scroll-snap, which is the main visual departure.
 */
.tw-home-empty {
	padding: 40px 0;
	text-align: center;
}

.tw-home-block {
	margin-bottom: 26px;
}

@media (min-width: 768px) {
	.tw-home-block {
		margin-bottom: 38px;
	}
}

.tw-home-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
	padding-inline-start: 12px;
	border-inline-start: 4px solid var(--tw-accent);
}

@media (min-width: 768px) {
	.tw-home-head {
		margin-bottom: 16px;
		padding-inline-start: 14px;
	}
}

.tw-home-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tw-accent);
}

.tw-home-title {
	margin: 0;
	font-size: 20px;
	font-weight: var(--tw-heading);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

@media (min-width: 768px) {
	.tw-home-title {
		font-size: 25px;
	}
}

/* ---------- Promo band ---------- */

/*
 * One compact rail rather than a lead-tile-plus-stack. The first layout let the
 * lead stretch to the height of the side stack and pushed the fold to 823px.
 */
.tw-home-promos {
	margin-bottom: 26px;
}

@media (min-width: 768px) {
	.tw-home-promos {
		margin-bottom: 38px;
	}
}

.tw-home-promo-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 62%;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

@media (min-width: 560px) {
	.tw-home-promo-rail {
		grid-auto-columns: 40%;
	}
}

@media (min-width: 768px) {
	.tw-home-promo-rail {
		grid-auto-columns: 23%;
		gap: 12px;
	}
}

@media (min-width: 1280px) {
	.tw-home-promo-rail {
		grid-auto-columns: 18.5%;
		gap: 14px;
	}
}

.tw-home-promo {
	display: block;
	overflow: hidden;
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	box-shadow: inset 0 0 0 1px var(--tw-line-soft);
	scroll-snap-align: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tw-home-promo:hover,
.tw-home-promo:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 1px var(--tw-accent-soft),
		0 10px 24px rgba(14, 124, 134, 0.14);
}

.tw-home-promo img {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 447;
	object-fit: cover;
	background: var(--tw-bg-soft);
}

/* ---------- Department grid ---------- */

.tw-home-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 560px) {
	.tw-home-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}

@media (min-width: 1024px) {
	.tw-home-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 16px;
	}
}

.tw-home-tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	box-shadow: inset 0 0 0 1px var(--tw-line-soft);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tw-home-tile:hover,
.tw-home-tile:focus-visible {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1px var(--tw-accent-soft),
		0 12px 26px rgba(14, 124, 134, 0.15);
}

.tw-home-tile-media {
	display: block;
	overflow: hidden;
	background: var(--tw-bg-soft);
}

.tw-home-tile-media img {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 447;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.tw-home-tile:hover .tw-home-tile-media img,
.tw-home-tile:focus-visible .tw-home-tile-media img {
	transform: scale(1.05);
}

.tw-home-tile-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px 10px;
}

@media (min-width: 1024px) {
	.tw-home-tile-meta {
		padding: 10px 12px 12px;
	}
}

.tw-home-tile-name {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tw-text);
}

@media (min-width: 1024px) {
	.tw-home-tile-name {
		font-size: 14px;
	}
}

.tw-home-tile-count {
	font-size: 11px;
	font-weight: 500;
	color: var(--tw-muted);
	background: var(--tw-accent-soft);
	border-radius: 20px;
	padding: 2px 8px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---------- Browse rails ---------- */

.tw-home-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: 10px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}

@media (min-width: 560px) {
	.tw-home-rail {
		grid-auto-columns: 30%;
	}
}

@media (min-width: 768px) {
	.tw-home-rail {
		grid-auto-columns: 22%;
		gap: 12px;
	}
}

@media (min-width: 1280px) {
	.tw-home-rail {
		grid-auto-columns: 18%;
		gap: 14px;
	}
}

.tw-home-rail-tile {
	display: block;
	overflow: hidden;
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	box-shadow: inset 0 0 0 1px var(--tw-line-soft);
	scroll-snap-align: start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tw-home-rail-tile:hover,
.tw-home-rail-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow:
		inset 0 0 0 1px var(--tw-accent-soft),
		0 10px 22px rgba(14, 124, 134, 0.14);
}

.tw-home-rail-tile img {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 447;
	object-fit: cover;
	background: var(--tw-bg-soft);
}

/* ---------- Closing CTA ---------- */

/* The CTA link itself is styled in the 0.1.9 tap-target block further down,
 * which already guarantees the 44px target. */
.tw-home-cta {
	margin: 14px 0 0;
	text-align: center;
}

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

.tw-footer {
	background: var(--tw-bg-soft);
	border-top: 1px solid var(--tw-line);
}

/* USP strip */
.tw-footer {
	/* Bacola ships `body { text-align: left }`, which inverts the whole
	   RTL footer. Re-assert the correct edge here. */
	direction: rtl;
	text-align: right;
}

.tw-footer-usp {
	background: var(--tw-accent-dark);
	color: #fff;
}

.tw-usp-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding-block: 22px;
}

.tw-usp {
	display: flex;
	align-items: center;
	gap: 12px;
}

.tw-usp i {
	font-size: 26px;
	flex-shrink: 0;
	opacity: 0.95;
}

.tw-usp-text {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.tw-usp-text b {
	font-size: 14px;
	font-weight: 600;
}

.tw-usp-text small {
	font-size: 12px;
	opacity: 0.8;
}

/* main columns */
.tw-footer-main {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	padding-block: 36px;
}

.tw-footer-brand {
	max-width: 340px;
}

.tw-footer-brand .tw-logo-mark {
	height: 48px;
}

.tw-footer-brand .tw-logo-ar {
	font-size: 26px;
}

.tw-footer-brand .tw-logo-en {
	font-size: 12px;
	margin-top: 4px;
}

.tw-footer-brand p {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--tw-muted);
}

.tw-footer-brand .tw-footer-note {
	margin-top: 8px;
}

.tw-footer-col h4 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tw-text);
}

.tw-footer-col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-footer-col ul li + li {
	margin-top: 9px;
}

.tw-footer-col ul a {
	display: inline-block;
	font-size: 13px;
	color: var(--tw-muted);
	text-align: right;
	transition: color 0.15s ease, transform 0.15s ease;
}

.tw-footer-col ul a:hover {
	color: var(--tw-accent);
	text-decoration: none;
	transform: translateX(3px);
}

/* bottom bar */
.tw-footer-bar {
	background: #fff;
	border-top: 1px solid var(--tw-line);
}

.tw-footer-bar-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-block: 18px;
	text-align: center;
}

.tw-footer-bar p {
	margin: 0;
	font-size: 12.5px;
	color: var(--tw-muted);
	text-align: right;
}

.tw-footer-made {
	color: var(--tw-accent) !important;
	font-weight: 500;
}

/* ============ Responsive ============ */

@media (min-width: 768px) {
	.tw-usp-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}

	.tw-usp {
		flex-direction: column;
		align-items: center;
		gap: 8px;
		text-align: center;
	}

	.tw-usp-text {
		align-items: center;
	}

	.tw-footer-main {
		grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
		gap: 40px;
	}

	.tw-footer-bar-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: start;
	}
}

@media (max-width: 1023px) {
	.tw-lang,
	.tw-signup,
	.tw-sep {
		display: none;
	}
}

@media (max-width: 767px) {
	.tw-header-inner {
		flex-wrap: wrap;
		gap: 10px;
		min-height: 0;
		padding-block: 10px 0;
	}

	.tw-brand {
		width: 100%;
		height: 43px;
	}

	.tw-logo-mark {
		height: 30px;
	}

	.tw-logo-ar {
		font-size: 17px;
	}

	.tw-logo-en {
		font-size: 9.5px;
		margin-top: 2px;
	}

	.tw-search-mobile {
		display: block;
	}

	.tw-search-desktop {
		display: none;
	}

	.tw-actions {
		margin-inline-start: auto;
	}

	.tw-main {
		padding-top: 8px;
	}

	.tw-usp-grid {
		grid-template-columns: 1fr 1fr;
		gap: 16px 12px;
	}

	.tw-usp {
		gap: 8px;
	}

	.tw-usp i {
		font-size: 22px;
	}

	.tw-usp-text b {
		font-size: 12.5px;
	}

	.tw-usp-text small {
		display: none;
	}

	.tw-footer-main {
		gap: 26px;
		padding-block: 28px;
	}
}

/* Neutralize Bacola leftovers on our custom templates */
.tw-main *,
.tw-header *,
.tw-footer * {
	box-sizing: border-box;
}

/* ==========================================================================
   Shop: filter sidebar, toolbar, and the Tamween product card
   ==========================================================================

   Track count is pinned, not auto-filling. `repeat(auto-fill, minmax(160px, 1fr))`
   resolved to 7 tracks at 1440px, 5 at 1024px and 4 at 768px, which left orphan
   rows of 2 and 1. The catalogue pages in 8 (per category) and 16 (per shop
   page), so 2 and 4 tracks divide both evenly; 3 tracks is only used between
   700px and 1279px where a track would otherwise be under 180px wide.

   The sidebar eats 250px + 22px gap, which is why the track count steps at
   1280 rather than 1024: at a 1024 viewport a 4-track row would have collapsed
   to 168px cards once the sidebar was subtracted. */

.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 430px) {
	.products {
		gap: 10px;
	}
}

/*
 * CRITICAL: Bacola sets `flex: 0 0 25%; max-width: 25%` on `.products li`.
 * Because the card is a flex column the `li` is a grid item, so those
 * percentages resolve against its own track — collapsing every card. Force each
 * item to fill its track.
 */
.products > li,
.products > .tw-product,
.related.products > li,
.up-sells.products > li {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}

/* WooCommerce emits <section class="related products"> wrapping the heading
   and an inner <div class="products">. The section must NOT itself be a grid:
   the shared `.products` rule made it `display:grid`, then this ladder gave it
   repeat(4, 1fr), so the heading and the entire product grid occupied two of
   the four tracks and every card collapsed to ~69px wide. Scope the grid to
   the inner container only and keep the section a normal block. */
section.related.products,
section.up-sells.products {
	display: block;
}

.related > .products,
.up-sells > .products {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.related > .products,
	.up-sells > .products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Archive layout: filters beside results ---------- */

.tw-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: start;
}

@media (min-width: 1024px) {
	.tw-shop-layout {
		grid-template-columns: 250px minmax(0, 1fr);
		gap: 22px;
	}
}

.tw-shop-results {
	min-width: 0;
}

.tw-shop-archive .tw-shop-results .products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

@media (min-width: 700px) {
	.tw-shop-archive .tw-shop-results .products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (min-width: 1024px) {
	.tw-shop-archive .tw-shop-results .products {
		gap: 15px;
	}
}

@media (min-width: 1280px) {
	.tw-shop-archive .tw-shop-results .products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 16px;
	}
}

/* ---------- Toolbar ---------- */

.tw-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.tw-shop-toolbar-start {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.tw-shop-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

@media (max-width: 1023px) {
	.tw-shop-filter-toggle {
		display: inline-flex;
	}
}

.tw-shop-filter-toggle:hover,
.tw-shop-filter-toggle:focus-visible {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
}

.tw-shop-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--tw-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/*
 * The toolbar is a flex row with `space-between`, so the result count sits on
 * the inline end and the sort control on the other. An earlier release set
 * `.woocommerce-ordering { width: 100% !important; margin-bottom: 18px !important }`
 * to make the standalone Bacola ordering block behave; both !important flags
 * still apply inside the toolbar and forced the form to 100% width, which
 * consumed the whole row and dropped the sort control onto its own line.
 * Both must be cancelled here, not merely re-set, hence the !important.
 */
.tw-shop-toolbar .woocommerce-ordering {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	flex: 0 0 auto;
	justify-content: flex-end;
	gap: 10px;
}

/*
 * Empty result set. The sidebar and toolbar are still on screen at this point —
 * the archive templates deliberately render the filter panel rather than
 * replacing it with a notice — so this block only has to explain the emptiness
 * and offer the way out.
 */
.tw-shop-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 56px 20px;
	border: 1px dashed var(--tw-line);
	border-radius: var(--tw-radius);
	background: #fff;
	text-align: center;
}

.tw-shop-empty > i {
	font-size: 30px;
	color: var(--tw-muted);
}

.tw-shop-empty-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--tw-text);
}

.tw-shop-empty-text {
	margin: 0;
	font-size: 13px;
	color: var(--tw-muted);
}

.tw-shop-empty-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: 6px;
	padding: 0 20px;
	border-radius: var(--tw-radius-sm);
	background: var(--tw-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.tw-shop-empty-reset:hover,
.tw-shop-empty-reset:focus-visible {
	background: var(--tw-accent-dark);
	color: #fff;
}

/* ---------- Filter panel ---------- */

.tw-filters {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
}

@media (min-width: 1024px) {
	.tw-filters {
		position: sticky;
		top: 96px;
		max-height: calc(100vh - 120px);
		border: 1px solid var(--tw-line);
		border-radius: 14px;
		overflow: hidden;
	}
}

/*
 * Below 1024px the single <aside> in the template becomes an off-canvas drawer
* that slides in from the right. The physical `right` edge plus `translateX`
 * is used rather than `inset-inline-start` so the panel always enters from the
 * right regardless of document direction — an RTL logical property would have
 * parked it on the left and then animated it in the wrong direction.
 */
@media (max-width: 1023px) {
/* Animated with `transform`, not `left`. The `left` version measured as
	 * still 0px more than 600ms after the close tap and only reached 100% by
	 * ~1.2s, which left the open panel sitting over the grid swallowing taps;
	 * a transform is compositor-driven and lands on schedule. `visibility` is
	 * switched with a delayed step so the panel is only removed after it has
	 * finished sliding out, and is inert the rest of the time. */
	.tw-shop-aside {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		width: min(330px, 88vw);
		z-index: 10040;
		display: flex;
		border: 0;
		border-radius: 0;
		box-shadow: -8px 0 30px -12px rgba(18, 33, 43, 0.35);
		transform: translateX(100%);
		visibility: hidden;
		/* Belt and braces: while the slide-out is still playing, the panel is
		 * still on screen and would otherwise swallow taps meant for the grid. */
		pointer-events: none;
		transition:
			transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.26s;
		overflow: hidden;
	}

	body.tw-drawer-open .tw-shop-aside {
		transform: none;
		visibility: visible;
		pointer-events: auto;
		transition:
			transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s;
	}

	body.tw-drawer-open {
		overflow: hidden;
	}
}

.tw-shop-scrim {
	position: fixed;
	inset: 0;
	z-index: 10030;
	background: rgba(18, 33, 43, 0.45);
	border: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.26s ease;
}

.tw-shop-scrim:not([hidden]) {
	display: block;
}

body.tw-drawer-open .tw-shop-scrim {
	opacity: 1;
	pointer-events: auto;
}

/*
 * A visitor who asks for reduced motion should get the drawer to appear and
 * disappear instantly. The delayed `visibility` step only exists to keep the
 * panel on screen while it slides away, so dropping the transition wholesale
 * is the correct reading of the preference rather than zeroing the duration.
 */
@media (prefers-reduced-motion: reduce) {
	.tw-shop-aside,
	.tw-shop-scrim,
	.tw-filters-block,
	.tw-card-quick {
		transition: none !important;
	}
}

.tw-filters-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--tw-line-soft);
	background: #fff;
}

.tw-filters-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--tw-text);
}

.tw-filters-title i {
	font-size: 17px;
	color: var(--tw-accent);
}

.tw-filters-close {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 8px;
	background: var(--tw-bg-soft);
	color: var(--tw-text);
	font-size: 18px;
	cursor: pointer;
}

@media (max-width: 1023px) {
	.tw-filters-close {
		display: inline-flex;
	}
}

.tw-filters-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 14px 10px;
}

.tw-filters-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid var(--tw-line-soft);
	background: #fff;
}

.tw-filters-apply {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--tw-radius-sm);
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.tw-filters-apply:hover,
.tw-filters-apply:focus-visible {
	background: var(--tw-accent-dark);
}

.tw-filters-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: var(--tw-muted);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.tw-filters-clear:hover,
.tw-filters-clear:focus-visible {
	color: var(--tw-accent);
}

/* Facet blocks */

.tw-filters-block {
	border-bottom: 1px solid var(--tw-line-soft);
}

.tw-filters-block:last-child {
	border-bottom: 0;
}

.tw-filters-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 46px;
	padding: 0;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--tw-text);
}

.tw-filters-summary::-webkit-details-marker {
	display: none;
}

.tw-filters-summary i {
	font-size: 16px;
	color: var(--tw-muted);
	transition: transform 0.2s ease;
}

.tw-filters-block[open] > .tw-filters-summary i {
	transform: rotate(180deg);
}

.tw-filters-summary:focus-visible {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.tw-filters-body {
	padding: 0 0 12px;
}

.tw-filters-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.tw-filters-check {
	margin: 0;
}

.tw-filters-check[style*="--tw-depth"] {
	padding-inline-start: 14px;
}

/*
 * The native input is kept in the accessibility tree and stays focusable; only
 * its rendering is replaced by `.tw-filters-box`. A `display: none` control
 * would have taken the checkbox out of tab order entirely.
 */
.tw-filters-check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

.tw-filters-check label {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 36px;
	padding: 3px 2px;
	cursor: pointer;
	font-size: 12.5px;
	color: var(--tw-text);
	line-height: 1.4;
}

.tw-filters-box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 17px;
	height: 17px;
	border: 1.5px solid #cbd5e1;
	border-radius: 5px;
	background: #fff;
	color: #fff;
	font-size: 12px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.tw-filters-box i {
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.tw-filters-check input:checked + label .tw-filters-box {
	background: var(--tw-accent);
	border-color: var(--tw-accent);
}

.tw-filters-check input:checked + label .tw-filters-box i {
	opacity: 1;
	transform: scale(1);
}

.tw-filters-check input:focus-visible + label .tw-filters-box {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}

.tw-filters-check input:checked + label .tw-filters-check-label {
	font-weight: 700;
	color: var(--tw-accent-dark);
}

.tw-filters-check-label {
	flex: 1 1 auto;
	min-width: 0;
}

.tw-filters-check-meta {
	flex: 0 0 auto;
	font-size: 11.5px;
	color: var(--tw-muted);
	font-variant-numeric: tabular-nums;
}

.tw-filters-check.is-locked label {
	cursor: default;
	color: var(--tw-muted);
}

.tw-filters-check.is-locked .tw-filters-box {
	background: var(--tw-accent-soft);
	border-color: var(--tw-accent-soft);
	color: var(--tw-accent);
}

.tw-filters-check.is-locked .tw-filters-box i {
	opacity: 1;
	transform: scale(1);
}

/* Price facet */

.tw-filters-price {
	padding-top: 2px;
}

.tw-filters-slider {
	position: relative;
	height: 26px;
	/* Forced LTR: the two overlapping range inputs are positioned by percentage,
	   and an RTL range reverses its own direction, which would put the minimum
	   thumb on the right while the fill span still draws from the left. */
	direction: ltr;
	margin: 0 9px 2px;
}

.tw-filters-slider::before {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline: 0;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
	background: var(--tw-line);
}

.tw-filters-slider-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	margin-top: -2px;
	border-radius: 999px;
	background: var(--tw-accent);
	left: var(--lo, 0%);
	right: calc(100% - var(--hi, 100%));
}

.tw-filters-range {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	/* The inputs must not eat clicks meant for the thumb underneath; the thumb
	   alone re-enables pointer events via ::-webkit-slider-thumb. */
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.tw-filters-range:focus {
	outline: none;
}

.tw-filters-range::-webkit-slider-runnable-track {
	height: 4px;
	background: transparent;
	border: 0;
}

.tw-filters-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 17px;
	height: 17px;
	margin-top: -6.5px;
	border: 2px solid var(--tw-accent);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(18, 33, 43, 0.25);
	cursor: grab;
}

.tw-filters-range::-webkit-slider-thumb:active {
	cursor: grabbing;
}

.tw-filters-range:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}

.tw-filters-range::-moz-range-track {
	height: 4px;
	background: transparent;
	border: 0;
}

.tw-filters-range::-moz-range-thumb {
	pointer-events: auto;
	width: 15px;
	height: 15px;
	border: 2px solid var(--tw-accent);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 4px rgba(18, 33, 43, 0.25);
	cursor: grab;
}

.tw-filters-price-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 6px;
}

.tw-filters-price-field {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	height: 40px;
	padding: 0 9px;
	border: 1px solid var(--tw-line);
	border-radius: 8px;
	background: #fff;
}

.tw-filters-price-field:focus-within {
	border-color: var(--tw-accent);
	outline: 2px solid var(--tw-accent);
	outline-offset: 1px;
}

.tw-filters-price-field span {
	flex: 0 0 auto;
	font-size: 11px;
	color: var(--tw-muted);
}

.tw-filters-price-field input {
	width: 100%;
	min-width: 0;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	/* Firefox keeps a spinner and lets it eat the 40px field. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.tw-filters-price-field input::-webkit-outer-spin-button,
.tw-filters-price-field input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tw-filters-price-echo {
	margin: 8px 0 0;
	min-height: 17px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tw-accent-dark);
	text-align: center;
}

.tw-filters-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
}

.tw-filters-chip {
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--tw-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tw-muted);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 600;
	cursor: pointer;
}

.tw-filters-chip:hover,
.tw-filters-chip:focus-visible {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
	background: var(--tw-accent-soft);
}

/* Active-filter chips beside the toolbar */

.tw-active-filters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.tw-active-filters-label {
	font-size: 12px;
	color: var(--tw-muted);
}

.tw-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 30px;
	padding: 0 10px;
	border: 1px solid var(--tw-accent);
	border-radius: 999px;
	background: var(--tw-accent-soft);
	color: var(--tw-accent-dark);
	font-size: 11.5px;
	font-weight: 700;
	text-decoration: none;
}

.tw-active-chip:hover,
.tw-active-chip:focus-visible {
	background: var(--tw-accent);
	color: #fff;
}

.tw-active-chip i {
	font-size: 13px;
}

.tw-active-chip.is-clear {
	border-style: dashed;
	background: #fff;
	color: var(--tw-muted);
}

.tw-active-chip.is-clear:hover,
.tw-active-chip.is-clear:focus-visible {
	border-style: solid;
	background: #fff;
	color: var(--tw-accent);
}

/* ==========================================================================
   Product card
   ========================================================================== */

.tw-card {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	border: 1px solid var(--tw-line);
	border-radius: 16px;
	background: #fff;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
	.tw-card:hover {
		transform: translateY(-4px);
		border-color: var(--tw-accent);
		box-shadow: 0 18px 34px -22px rgba(18, 33, 43, 0.5);
	}
}

.tw-card-media {
	position: relative;
	aspect-ratio: 1;
	background: var(--tw-bg-soft);
	overflow: hidden;
}

.tw-card-link {
	display: block;
	width: 100%;
	height: 100%;
}

.tw-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (hover: hover) {
	.tw-card:hover .tw-card-media img {
		transform: scale(1.07);
	}
}

.tw-card-badges {
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 9px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	pointer-events: none;
}

.tw-badge {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	font-family: var(--tw-font);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.2px;
	color: #fff;
	box-shadow: 0 2px 6px -2px rgba(18, 33, 43, 0.4);
}

.tw-badge.is-sale {
	background: linear-gradient(135deg, #e11d48, #f43f5e);
}

.tw-badge.is-oos {
	background: linear-gradient(135deg, #475569, #64748b);
}

/*
 * Quick view. Hidden until hover on pointer devices; always visible on touch,
 * where there is no hover state to reveal it and a button that can never be
 * seen is a button that does not exist.
 */
.tw-card-quick {
	position: absolute;
	inset-block-end: 9px;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: calc(100% - 18px);
	margin-inline: auto;
	min-height: 38px;
	border: 0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--tw-text);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px -8px rgba(18, 33, 43, 0.5);
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s ease, color 0.18s ease;
}

@media (hover: hover) {
	.tw-card-quick {
		opacity: 0;
		transform: translateY(10px);
	}

	.tw-card:hover .tw-card-quick,
	.tw-card:focus-within .tw-card-quick {
		opacity: 1;
		transform: translateY(0);
	}
}

.tw-card-quick:hover,
.tw-card-quick:focus-visible {
	background: var(--tw-accent);
	color: #fff;
}

.tw-card-quick:focus-visible {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}

.tw-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 7px;
	padding: 11px 12px 13px;
}

.tw-card-eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	color: var(--tw-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tw-card-title {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--tw-text);
}

.tw-card-title a {
	color: inherit;
	text-decoration: none;
}

.tw-card-title a:hover,
.tw-card-title a:focus-visible {
	color: var(--tw-accent);
}

/*
 * Two-line clamp with the second line's height reserved, so the price row of
 * every card in a row lands on the same baseline no matter how long the name is.
 */
.tw-card-title > a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.6em * 2);
}

/*
 * The rating row is always rendered, empty when a product has no reviews. It
 * reserves one line so that adding reviews later cannot shift the whole grid
 * down by a line on the reviewed products only.
 */
/* Only present when the product has reviews — `content-product.php` omits the
   row entirely at zero reviews rather than showing an empty zero-star bar, so
   `min-height` here only reserves the row's own height, not a gap. */
.tw-card-rating {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	min-height: 14px;
	font-size: 11px;
	color: var(--tw-muted);
}

.tw-card-stars {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 66px;
	height: 13px;
	overflow: hidden;
	direction: ltr;
	white-space: nowrap;
	font-size: 13px;
	line-height: 13px;
	letter-spacing: 1px;
}

.tw-card-stars::before {
	content: "\2605\2605\2605\2605\2605";
	color: #dbe3e9;
}

.tw-card-stars::after {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: var(--tw-fill, 0%);
	overflow: hidden;
	color: #f0a417;
}

.tw-card-rating-count {
	font-variant-numeric: tabular-nums;
}

/*
 * WooCommerce's own "visually hidden" pattern, scoped to the card.
 *
 * `content-product.php` nests a `.screen-reader-text` span inside
 * `.tw-card-price-now` to announce the original price to screen readers. That
 * span is a flex child, so if the rule that hides it is missing it becomes a
 * normal ~170px inline box and drags the price row wider than a 151px card at
 * 360px — `flex-wrap` cannot rescue an over-wide item.
 *
 * Today the live site gets this from `block-library`, which a cache or
 * performance plugin is free to dequeue, so the card cannot rely on it.
 */
.tw-card .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	white-space: nowrap;
	word-wrap: normal !important;
}

.tw-card-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 8px;
	margin: 0;
}

.tw-card-price-now {
	font-size: 15px;
	font-weight: 800;
	color: var(--tw-accent-dark);
	line-height: 1.5;
}

.tw-card-price-now del {
	text-decoration: none;
}

.tw-card-price-was {
	font-size: 12px;
	color: #9aa8b2;
}

.tw-card-price-was del {
	text-decoration: line-through;
}

.tw-card-price-save {
	font-size: 11px;
	font-weight: 700;
	color: #b91c1c;
	white-space: nowrap;
}

.tw-card-stock {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.tw-card-stock-bar {
	flex: 1 1 auto;
	height: 4px;
	border-radius: 999px;
	background: var(--tw-line);
	overflow: hidden;
}

.tw-card-stock-fill {
	display: block;
	height: 100%;
	width: var(--tw-stock, 100%);
	border-radius: 999px;
	background: linear-gradient(90deg, #f0a417, #e11d48);
}

.tw-card-stock-text {
	flex: 0 0 auto;
	font-size: 10.5px;
	font-weight: 700;
	color: #b91c1c;
	white-space: nowrap;
}

.tw-card-actions {
	margin-top: auto;
}

/*
 * Bacola appends `button-primary xsmall rounded wide` to the loop add-to-cart
 * link, and the `.xsmall` sizing wins on specificity, so height and width are
 * pinned here on a selector that outranks it.
 */
.tw-card .tw-card-add,
.tw-card .button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	min-height: 44px;
	padding: 0 10px;
	border: 0;
	border-radius: 12px;
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease;
}

.tw-card .tw-card-add:hover,
.tw-card .tw-card-add:focus-visible,
.tw-card .button-primary:hover,
.tw-card .button-primary:focus-visible {
	background: var(--tw-accent-dark);
	color: #fff;
}

.tw-card-add.is-disabled {
	background: var(--tw-line);
	color: #fff;
	cursor: not-allowed;
}

.tw-card .tw-card-add.added,
.tw-card .button-primary.added {
	background: #0f9b58;
}

.tw-card .added_to_cart {
	display: none;
}

/* ---------- Quick view dialog ---------- */

.tw-quickview {
	position: relative;
	width: min(880px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--tw-text);
	overflow: hidden;
}

.tw-quickview::backdrop {
	background: rgba(18, 33, 43, 0.55);
	backdrop-filter: blur(2px);
}

.tw-quickview-inner {
	display: grid;
	grid-template-columns: 1fr;
	max-height: calc(100vh - 48px);
	overflow: auto;
}

@media (min-width: 700px) {
	.tw-quickview-inner {
		grid-template-columns: 300px minmax(0, 1fr);
	}
}

.tw-quickview-media {
	background: var(--tw-bg-soft);
}

.tw-quickview-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.tw-quickview-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px 20px;
}

.tw-quickview-close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	color: var(--tw-text);
	font-size: 20px;
	cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(18, 33, 43, 0.5);
}

.tw-quickview-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

.tw-quickview-price {
	font-size: 20px;
	font-weight: 800;
	color: var(--tw-accent-dark);
}

.tw-quickview-price del {
	margin-inline-start: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #9aa8b2;
}

.tw-quickview-desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--tw-muted);
}

.tw-quickview-desc p {
	margin: 0 0 6px;
}

.tw-quickview-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	font-size: 12px;
	color: var(--tw-muted);
}

.tw-quickview-meta b {
	color: var(--tw-text);
	font-weight: 600;
}

.tw-quickview-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.tw-quickview-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 12px;
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.tw-quickview-actions .button:hover {
	background: var(--tw-accent-dark);
	color: #fff;
}

.tw-quickview-actions .tw-quickview-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--tw-accent);
	text-decoration: underline;
	offset: 3px;
}

.tw-quickview-error {
	margin: 0;
	font-size: 13px;
	color: #b91c1c;
}

/* ==========================================================================
   Inner pages — shop, category, product, cart, checkout, account, search
   Bacola styles every inner template with its own `div.container` (1200px) and
   a left-aligned body. Everything below re-asserts the Tamween design system
   on those templates instead of trying to rebuild them.
   ========================================================================== */

/* --- Unify the content container with the 1280px home grid --- */
body:not(.home) div.container,
body:not(.home) .container {
	max-width: var(--tw-container) !important;
	width: 100%;
	margin-inline: auto;
	padding-inline: 16px;
}

body:not(.home) #content,
body:not(.home) .site-content {
	width: 100%;
}

/* --- RTL: Bacola forces `text-align:left` on body, which inverts every
   heading, paragraph, label and price across the store. Re-assert `start`
   and let the odd English-only node (logo, ISBN, LTR numerals) opt out. --- */
body:not(.home) .container,
body:not(.home) .container * {
	text-align: right;
}

body:not(.home) .container .tw-logo-en,
body:not(.home) .container .tw-lang,
body:not(.home) .container .woocommerce-Price-amount,
body:not(.home) .container .sku,
body:not(.home) .container code,
body:not(.home) .container .wc-block-components-formatted-money-amount,
body:not(.home) .container .tw-header .tw-logo,
body:not(.home) .container .tw-header input[type="search"] {
	text-align: start;
}

body:not(.home) .container .screen-reader-text,
body:not(.home) .container .woocommerce-breadcrumb,
body:not(.home) .container .breadcrumb,
body:not(.home) .container .product_meta,
body:not(.home) .container .posted-on,
body:not(.home) .container .entry-meta,
body:not(.home) .container .woocommerce-order {
	text-align: start;
}

body:not(.home) .container h1,
body:not(.home) .container h2,
body:not(.home) .container h3,
body:not(.home) .container h4,
body:not(.home) .container h5,
body:not(.home) .container h6,
body:not(.home) .container p,
body:not(.home) .container li,
body:not(.home) .container dd,
body:not(.home) .container dt,
body:not(.home) .container label,
body:not(.home) .container legend,
body:not(.home) .container th,
body:not(.home) .container td,
body:not(.home) .container blockquote {
	text-align: right;
}

/* --- Buttons: Bacola/WooCommerce default to #233a95 blue. Use the petrol
   accent so CTAs match the home page. --- */
body:not(.home) .container button,
body:not(.home) .container input[type="submit"],
body:not(.home) .container .button,
body:not(.home) .container .woocommerce-button,
body:not(.home) .container .wc-block-components-button,
body:not(.home) .container a.button,
body:not(.home) .container a.alt,
body:not(.home) .container button.alt,
body:not(.home) .container .wp-block-button__link {
	background: var(--tw-accent);
	border-color: var(--tw-accent);
	border-radius: var(--tw-radius-sm);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	min-height: 44px;
	padding: 10px 18px;
	transition: background 0.15s ease;
}

body:not(.home) .container button:hover,
body:not(.home) .container input[type="submit"]:hover,
body:not(.home) .container .button:hover,
body:not(.home) .container a.button:hover,
body:not(.home) .container a.alt:hover,
body:not(.home) .container .wp-block-button__link:hover {
	background: var(--tw-accent-dark);
	border-color: var(--tw-accent-dark);
	color: #fff;
}

body:not(.home) .container .button.alt,
body:not(.home) .container button.alt,
body:not(.home) .container .wc-block-components-button.is-primary {
	background: var(--tw-accent) !important;
	border-color: var(--tw-accent) !important;
	color: #fff !important;
}

/* --- Forms --- */
body:not(.home) .container input[type="text"],
body:not(.home) .container input[type="email"],
body:not(.home) .container input[type="password"],
body:not(.home) .container input[type="tel"],
body:not(.home) .container input[type="number"],
body:not(.home) .container input[type="search"],
body:not(.home) .container input[type="text"].input-text,
body:not(.home) .container select,
body:not(.home) .container textarea,
body:not(.home) .container .wc-block-components-text-input input,
body:not(.home) .container .wc-block-components-select select {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 14px;
	text-align: right;
}

body:not(.home) .container textarea {
	min-height: 120px;
	resize: vertical;
}

body:not(.home) .container input:focus,
body:not(.home) .container select:focus,
body:not(.home) .container textarea:focus {
	outline: 2px solid var(--tw-accent);
	outline-offset: 1px;
	border-color: var(--tw-accent);
}

body:not(.home) .container label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tw-text);
}

/* --- Breadcrumbs: Bacola renders 18px-tall links, far under a tap target --- */
body:not(.home) .woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--tw-muted);
	padding: 14px 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

body:not(.home) .woocommerce-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tw-muted);
}

body:not(.home) .woocommerce-breadcrumb a:hover {
	color: var(--tw-accent);
}

/* Bacola colours the current (non-link) crumb with --color-info-dark (#9b9bb4)
   at 12px — only 2.71:1 on white. Use the muted token (>4.5:1) and lift the
   bare <li> to the same 13px as the rest of the trail. */
body:not(.home) .woocommerce-breadcrumb ul li {
	color: var(--tw-muted);
	font-size: 13px;
}

/* The in-stock pill shipped as #00b853 on #e5f8ed (2.38:1). Darken the text
   to clear 4.5:1 while keeping the green semantic. */
.single-product .stock.in-stock {
	color: #0a6b38;
}

/* --- Page header (shop, category, search) --- */
.woocommerce-products-header {
	display: block;
	padding: 8px 0 20px;
	border-bottom: 1px solid var(--tw-line-soft);
	margin-bottom: 20px;
}

.woocommerce-products-header__title,
.woocommerce-products-header h1,
.page-title {
	margin: 0 0 4px;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--tw-text);
}

.woocommerce-products-header__taxonomy,
.tax-description {
	margin: 0;
	font-size: 13px;
	color: var(--tw-muted);
}

/* --- Main content column: Bacola reserves 900px+300px even when the sidebar
   holds nothing useful. Give the product grid the full width. --- */
body:not(.home) .content-wrapper,
body:not(.home) .row.content-wrapper {
	display: block;
	width: 100% !important;
}

body:not(.home) .content-wrapper > .col-12,
body:not(.home) .content-wrapper > div[class*="col-"] {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

body:not(.home) #sidebar,
body:not(.home) .sidebar-widget-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-top: 32px;
}

body:not(.home) #sidebar .widget,
body:not(.home) .sidebar-widget-area .widget {
	background: var(--tw-surface);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	padding: 16px;
	margin-bottom: 16px;
}

body:not(.home) #sidebar .widget-title,
body:not(.home) .sidebar-widget-area .widget-title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
}

body:not(.home) #sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body:not(.home) #sidebar li {
	border-bottom: 1px solid var(--tw-line-soft);
	font-size: 13px;
}

body:not(.home) #sidebar li:last-child {
	border-bottom: 0;
}

body:not(.home) #sidebar li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	color: var(--tw-text);
}

body:not(.home) #sidebar li a:hover {
	color: var(--tw-accent);
}

/* Hide WordPress core's default archive/category/blog widgets. They render
   English labels and expose the empty "Uncategorized" taxonomy. */
body:not(.home) #sidebar .widget_archive,
body:not(.home) #sidebar .widget_categories,
body:not(.home) #sidebar .widget_recent_entries,
body:not(.home) #sidebar .widget_recent_comments,
body:not(.home) #sidebar .widget_block,
body:not(.home) .sidebar-widget-area .widget_archive,
body:not(.home) .sidebar-widget-area .widget_categories,
body:not(.home) .sidebar-widget-area .widget_recent_entries,
body:not(.home) .sidebar-widget-area .widget_recent_comments,
body:not(.home) .sidebar-widget-area .widget_block {
	display: none;
}

/* --- Ordering / filter toolbar --- */
.woocommerce-ordering,
.woocommerce-shop-toolbar,
.before-shop-loop {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 10px;
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 18px !important;
}

.woocommerce-ordering select {
	min-width: 210px;
	min-height: 44px;
	padding: 8px 12px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 13px;
	text-align: right;
}

/* Bacola's "Filter Product" toggle is a 24px-tall link. */
.filter-toggle,
.woocommerce-widget-area__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.filter-toggle:hover {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
}

/* --- Product count / result info --- */
.woocommerce-result-count,
.woocommerce-info {
	font-size: 13px;
	color: var(--tw-muted);
}

/* --- Notices --- */
.woocommerce-notices-wrapper {
	margin-bottom: 16px;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid var(--tw-line);
	border-inline-start: 4px solid var(--tw-accent);
	border-radius: var(--tw-radius-sm);
	background: var(--tw-surface);
	font-size: 14px;
	list-style: none;
}

.woocommerce-message {
	border-inline-start-color: #2e7d32;
}

.woocommerce-error {
	border-inline-start-color: #c62828;
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	float: none;
	margin-inline-start: auto;
}

/* --- Empty state (empty cart, no search results) --- */
.cart-empty,
.no-products-in-cart,
.wc-empty-cart-message + *,
.search-no-results .woocommerce-info,
.woocommerce-info:has(> a) {
	max-width: 640px;
	margin: 0 auto 20px;
	padding: 28px 22px;
	border: 1px dashed var(--tw-line);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	text-align: center;
}

.cart-empty::before,
.woocommerce-info:has(> a)::before {
	content: "\f07a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: block;
	font-size: 34px;
	color: var(--tw-accent);
	margin-bottom: 10px;
}

.cart-empty .button,
.woocommerce-info:has(> a) .button {
	display: inline-flex;
	margin-top: 14px;
}

/* --- Pagination --- */
.woocommerce-pagination {
	margin-top: 28px;
}

.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-size: 14px;
}

.woocommerce-pagination .page-numbers:hover {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--tw-accent);
	border-color: var(--tw-accent);
	color: #fff;
}

/* --- Single product ---
 *
 * The theme markup nests the heading separately from the two-column body:
 *
 *   div.product > .product-header              (H1 + SKU)
 *               > .product-content > .row > .col-lg-5 (.product-images)
 *                                            .col-lg-7 (.product-detail)
 *
 * A 5fr/6fr grid on .product therefore put the whole H1/SKU block into its
 * own column beside the gallery + buy panel and squeezed the real columns
 * into the other half. Stack the header on top and let Bacola's .row/.col
 * grid lay out gallery + summary.
 */
.single-product div.product {
	display: block;
}

.single-product div.product > .product-header {
	margin-bottom: 20px;
}

.single-product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.single-product .summary.entry-summary,
.single-product .woocommerce-product-details__short-description {
	width: 100% !important;
	float: none !important;
}

.single-product .woocommerce-product-details__short-description,
.single-product .summary.entry-summary {
	font-size: 14px;
	line-height: 1.85;
	color: var(--tw-muted);
}

.single-product h1.product_title,
.single-product .woocommerce-product-details__short-description + h2 {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.4;
}

.single-product .price,
.single-product .woocommerce-Price-amount {
	font-size: 22px;
	font-weight: 800;
	color: var(--tw-accent);
}

.single-product .quantity,
.single-product .tw-qty {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.single-product .quantity input,
.single-product input.qty {
	width: 90px;
	min-height: 44px;
	padding: 8px 10px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	text-align: center;
	font-family: inherit;
	font-size: 15px;
}

.single-product form.cart {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.single-product form.cart .button,
.single-product .single_add_to_cart_button {
	min-height: 46px;
	padding: 12px 26px;
	font-size: 15px;
}

.single-product .product_meta {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--tw-line-soft);
	font-size: 13px;
	color: var(--tw-muted);
}

.single-product .product_meta a {
	color: var(--tw-accent);
}

.single-product .woocommerce-tabs {
	grid-column: 1 / -1;
	margin-top: 8px;
}

.single-product .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--tw-line);
}

.single-product .woocommerce-tabs ul.tabs li {
	margin: 0;
}

.single-product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--tw-radius-sm) var(--tw-radius-sm) 0 0;
	color: var(--tw-muted);
	font-size: 14px;
	font-weight: 600;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
	background: #fff;
	border-color: var(--tw-line);
	color: var(--tw-accent);
}

.single-product .woocommerce-tabs .panel {
	padding: 18px;
	border: 1px solid var(--tw-line);
	border-radius: 0 var(--tw-radius) var(--tw-radius) var(--tw-radius);
	background: #fff;
	font-size: 14px;
	line-height: 1.85;
}

/* --- My account --- */
.woocommerce-MyAccount,
.woocommerce-account {
	width: 100% !important;
	max-width: 720px;
	margin: 0 auto 40px;
}

.woocommerce-MyAccount h2,
.woocommerce-account h2,
.woocommerce-form-login h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 800;
}

.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-coupon {
	padding: 22px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-form-coupon .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-login input[type="email"] {
	max-width: 100%;
}

.woocommerce-form-login .password-input,
.woocommerce-form-login .password-input input {
	width: 100% !important;
	max-width: 100% !important;
}

/* Bacola's password eye button is a 42px square on the wrong side. */
.woocommerce-form-login .woocommerce-input__wrapper {
	position: relative;
	width: 100%;
}

.woocommerce-form-login .show-password {
	position: absolute;
	inset-inline-end: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	min-height: 0;
	background: transparent !important;
	border: 0 !important;
	color: var(--tw-muted);
}

.woocommerce-form-login__submit {
	width: 100%;
	min-height: 46px;
}

.woocommerce-LostPassword a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	color: var(--tw-accent);
	font-size: 13px;
}

.woocommerce-privacy-policy-text,
.woocommerce-form-login__rememberme {
	font-size: 12px;
	color: var(--tw-muted);
}

/* Bacola puts `woocommerce-form-login__rememberme` on the <label> itself
   rather than on a wrapper, so the descendant selector below never matched and
   the label stayed at 26px with an 18px checkbox. Match both shapes. */
.woocommerce-form-login__rememberme,
.woocommerce-form-login__rememberme label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"],
.woocommerce-form-register__rememberme input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 0;
	accent-color: var(--tw-accent);
	cursor: pointer;
}

/* "هل نسيت كلمة المرور؟" renders as a bare 40px inline anchor. */
.woocommerce-form-login .woocommerce-LostPassword,
.woocommerce-form-register .woocommerce-LostPassword {
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
}

.woocommerce-form-login .woocommerce-LostPassword a,
.woocommerce-form-register .woocommerce-LostPassword a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--tw-accent);
}

/* --- WooCommerce Blocks: cart + checkout --- */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
	font-family: inherit;
}

.wc-block-components-sidebar-layout {
	gap: 24px;
	align-items: stretch;
}

.wc-block-components-sidebar,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: 340px !important;
	flex: 0 0 340px;
}

.wc-block-components-title,
.wc-block-components-sidebar-layout .wc-block-components-title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
}

.wc-block-components-product-name,
.wc-block-components-order-summary-item__product-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.wc-block-components-order-summary-item__product-name a {
	color: var(--tw-text);
}

.wc-block-components-product-image img {
	border-radius: var(--tw-radius-sm);
	border: 1px solid var(--tw-line-soft);
	object-fit: cover;
}

.wc-block-components-quantity,
.wc-block-components-quantity .wc-block-components-quantity__controls {
	--wp--preset--color--contrast: var(--tw-accent);
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
}

.wc-block-components-quantity input {
	min-height: 40px;
	text-align: center;
}

.wc-block-components-formatted-money-amount,
.wc-block-components-price {
	font-size: 14px;
	font-weight: 700;
}

.wc-block-components-totals,
.wc-block-components-totals-item,
.wc-block-components-total,
.wc-block-components-order-summary {
	border-color: var(--tw-line) !important;
}

.wc-block-components-totals-item,
.wc-block-components-total {
	font-size: 14px;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 17px;
	font-weight: 800;
	color: var(--tw-accent);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions .wc-block-components-button {
	width: 100%;
	min-height: 48px;
	font-size: 15px;
	font-weight: 700;
}

.wc-block-components-notice-banner,
.wc-block-components-notice-banner.is-dismissible {
	border-radius: var(--tw-radius-sm);
	font-size: 13px;
}

.wc-block-components-text-input.is-active,
.wc-block-components-text-input--input {
	border-color: var(--tw-line);
}

.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus {
	outline: 2px solid var(--tw-accent);
	outline-offset: 0;
}

.wc-block-checkout__form .wc-block-components-text-input,
.wc-block-checkout__form .wc-block-components-email,
.wc-block-checkout__form .wc-block-components-address-form,
.wc-block-checkout__form .wc-block-components-address-field {
	font-family: inherit;
}

.wc-block-checkout__summary {
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
}

.wc-block-components-payment-method,
.wc-block-components-payment-method-label {
	font-size: 14px;
	font-family: inherit;
}

.wc-block-components-radio-control__input {
	min-height: 20px;
	width: 20px;
	accent-color: var(--tw-accent);
}

.wc-block-components-form .wc-block-components-checkbox__label {
	font-size: 13px;
}

/* --- Search results: products must render as product cards, not blog posts --- */
.search-title {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tw-line-soft);
	font-size: 22px;
	font-weight: 800;
}

.search-results .site-posts,
.search-results .products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
}

.search-results article {
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: #fff;
	overflow: hidden;
	margin: 0;
}

/* --- 404 --- */
.tw-404 {
	max-width: 640px;
	margin: 0 auto;
	padding: 60px 22px 80px;
	text-align: center;
}

.tw-404__code {
	margin: 0;
	font-size: 76px;
	font-weight: 800;
	line-height: 1;
	color: var(--tw-accent);
}

.tw-404__title {
	margin: 10px 0 8px;
	font-size: 24px;
	font-weight: 800;
}

.tw-404__text {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--tw-muted);
	line-height: 1.9;
}

.tw-404__form {
	display: flex;
	gap: 8px;
	margin-bottom: 26px;
}

.tw-404__form input[type="search"] {
	flex: 1 1 auto;
	min-height: 46px;
}

.tw-404__form button {
	flex: 0 0 auto;
	min-height: 46px;
}

.tw-404__links-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tw-muted);
}

.tw-404__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.tw-404__links a {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 8px 16px;
	border: 1px solid var(--tw-line);
	border-radius: 999px;
	background: #fff;
	color: var(--tw-text);
	font-size: 13px;
	font-weight: 600;
}

.tw-404__links a:hover {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
}

/* --- Content pages (about, contact, faq, policies) --- */
.tw-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 26px 0 56px;
	font-size: 15px;
	line-height: 2;
}

.tw-page > h1:first-child,
.tw-page .entry-title {
	margin: 0 0 6px;
	font-size: 28px;
	font-weight: 800;
}

.tw-page h2 {
	margin: 30px 0 10px;
	font-size: 19px;
	font-weight: 800;
}

.tw-page h3 {
	margin: 22px 0 8px;
	font-size: 16px;
	font-weight: 700;
}

.tw-page p,
.tw-page li {
	font-size: 15px;
	line-height: 2;
}

.tw-page ul,
.tw-page ol {
	padding-inline-start: 20px;
}

.tw-page a {
	color: var(--tw-accent);
	text-decoration: underline;
}

.tw-page table {
	width: 100%;
	border-collapse: collapse;
	margin: 18px 0;
	font-size: 14px;
}

.tw-page th,
.tw-page td {
	padding: 10px 12px;
	border: 1px solid var(--tw-line);
	text-align: right;
}

.tw-page th {
	background: var(--tw-bg-soft);
	font-weight: 700;
}

.tw-page blockquote {
	margin: 18px 0;
	padding: 14px 16px;
	border-inline-start: 4px solid var(--tw-accent);
	background: var(--tw-surface);
	border-radius: 0 var(--tw-radius-sm) var(--tw-radius-sm) 0;
}

/* --- Tap targets: the store had 17–31px links. Enforce 40px minimum. --- */
body:not(.home) .container a.tw-signup,
body:not(.home) .container .tw-signup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
}

body:not(.home) .container .woocommerce-breadcrumb a,
body:not(.home) .container .entry-meta a,
body:not(.home) .container .posted-on a {
	min-height: 40px;
}

/* --- Responsive inner pages --- */
@media (max-width: 1024px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.wc-block-components-sidebar-layout {
		flex-direction: column;
	}

	.wc-block-components-sidebar,
	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		width: 100% !important;
		flex: 1 1 auto;
	}
}

/* Bacola's .row carries -15px inline margins that its .col padding re-adds.
   Inside the two-column product body the grid item cannot shrink below its
   min-content, so the whole page scrolled sideways on phones narrower than
   ~388px. Let the body shrink, then neutralise the negative gutter on narrow
   screens and stop the summary column from being an inline-flex row. */
.tw-single-product .product-content {
	min-width: 0;
}

@media (max-width: 480px) {
	.tw-single-product .product-content .row {
		margin-left: 0;
		margin-right: 0;
	}

	.tw-single-product .product-content .row > [class*="col"] {
		padding-left: 0;
		padding-right: 0;
	}

	.tw-single-product .product-detail .column {
		display: block;
		width: 100%;
		min-width: 0;
	}
}

@media (max-width: 768px) {
	body:not(.home) .container,
	body:not(.home) .container .container {
		padding-inline: 12px;
	}

	.woocommerce-products-header__title,
	.woocommerce-products-header h1,
	.page-title {
		font-size: 22px;
	}

	.woocommerce-ordering,
	.before-shop-loop {
		justify-content: stretch;
	}

	.woocommerce-ordering select {
		flex: 1 1 100%;
		min-width: 0;
	}

	.single-product h1.product_title {
		font-size: 20px;
	}

	.single-product .price,
	.single-product .woocommerce-Price-amount {
		font-size: 19px;
	}

	.search-results .site-posts,
	.search-results .products {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}

	.tw-404 {
		padding: 40px 16px 60px;
	}

	.tw-404__code {
		font-size: 58px;
	}

	.tw-404__title {
		font-size: 20px;
	}

	.tw-404__form {
		flex-direction: column;
	}

	.woocommerce-MyAccount,
	.woocommerce-account {
		max-width: 100%;
	}
}

@media (max-width: 430px) {
	.woocommerce-form-login,
	.woocommerce-form-register {
		padding: 16px;
	}

	.wc-block-components-sidebar-layout {
		gap: 16px;
	}
}

/* ==========================================================================
   0.1.9 — Front page RTL + shared tap targets
   0.1.8 re-asserted RTL through `body:not(.home) .container`, but the front
   page is built from Tamween's own markup (`.tw-main` / `.tw-container`) and
   never matches `.container`, so it kept inheriting Bacola's
   `body { text-align: left }`. Live audit: 613 left-aligned nodes on `/`
   (13 section headings, 13 counts, 104 titles, 104 descriptions, 149+149
   price spans, 104 add-to-cart links, 13 "عرض الكل" links).

   The same 0.1.8 pass also gated the tap-target work behind
   `body:not(.home)`, leaving 104 add-to-cart links at 34px, the cart link at
   24x36, the logo at 31px, "عرض الكل" at 17px and product titles at 16-36px.

   `.tw-main` is the only wrapper Tamween's own templates share, so targeting
   it directly covers the front page without depending on WordPress' body
   classes (a static front page is not given `.home`).

   0.1.22 rebuilt the home as a category-first layout, so the selectors below
   were re-pointed at the new `.tw-home-*` classes; the product and CTA rules
   still carry the archive and single-product pages.

   Target sizes follow WCAG 2.2: 44px for primary controls, 24px floor
   (2.5.8 AA) for inline text links.
   ========================================================================== */

.tw-main,
.tw-main .tw-container,
.tw-main .tw-home-head,
.tw-main .tw-home-eyebrow,
.tw-main .tw-home-title,
.tw-main .tw-home-tile-meta,
.tw-main .tw-home-tile-name,
.tw-main .tw-home-tile-count,
.tw-main .tw-home-cta,
.tw-main .tw-products,
.tw-main .tw-product-body,
.tw-main .tw-product-title,
.tw-main .tw-product-title a,
.tw-main .tw-product-desc,
.tw-main .tw-product-price,
.tw-main .tw-product .woocommerce-Price-amount,
.tw-main .tw-product .woocommerce-Price-currencySymbol,
.tw-main .tw-product .screen-reader-text,
.tw-main .tw-product-add,
.tw-main .tw-home-cta-link {
	text-align: right;
}

/* --- Primary controls: 44px --- */

.tw-header .tw-logo,
.tw-header .tw-logo .tw-logo-mark {
	min-height: 44px;
}

.tw-header .tw-logo {
	display: inline-flex;
	align-items: center;
}

.tw-header .tw-cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 10px;
}

.tw-main .tw-home-cta {
	margin: 14px 0 0;
	text-align: center;
}

.tw-main .tw-home-cta-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--tw-line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	color: var(--tw-text);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.tw-main .tw-home-cta-link:hover,
.tw-main .tw-home-cta-link:focus-visible {
	border-color: var(--tw-accent);
	color: var(--tw-accent);
	background: var(--tw-accent-soft);
}

/* Bacola appends `button-primary xsmall rounded wide` to the loop
   add-to-cart link through `woocommerce_loop_add_to_cart_link`; the
   `.xsmall` sizing wins on specificity, so pin the height here. */
.tw-main .tw-product-add,
.tw-main .tw-product .button-primary {
	min-height: 44px;
	padding: 0 14px;
	justify-content: center;
	text-align: center;
}

.tw-main .tw-product-title a {
	display: flex;
	align-items: center;
	min-height: 40px;
}

/*
 * The shared `.products` rule is now pinned to 2/4 tracks, which also
 * satisfies the 8-products-per-section constraint. Kept scoped to
 * `.tw-main` so the home grid stays pinned even if the shared rule is
 * overridden upstream by a plugin.
 */
.tw-main .products {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
	.tw-main .products {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* --- Inline text links: 24px floor (WCAG 2.2 2.5.8) --- */

.tw-footer-col ul a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding-block: 1px;
}

.tw-footer-bar-inner a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Standalone header link ("التسجيل"): 44px so it matches the logo and cart
   link, which are the two controls beside it. */
.tw-header .tw-signup {
	min-height: 44px;
	padding-inline: 4px;
}

.tw-header .tw-search-box {
	height: 44px;
}

/* --- 0.1.12: shop / category archive chrome ---

   The archive wrapper carries `tw-main`, so the product cards, 44px
   add-to-cart buttons and 40px titles are already covered. What is left is
   the WooCommerce chrome the home page never had: the page header, the
   result count, the select2 ordering control and the pagination rail. All
   of it inherited Bacola's `body { text-align: left }` and rendered flush
   left inside a 1280px RTL container. */

.tw-shop-archive .woocommerce-products-header {
	margin: 0 0 14px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tw-line-soft);
	text-align: right;
}

.tw-shop-archive .woocommerce-products-header__title {
	margin: 0 0 6px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tw-text);
	text-align: right;
}

.tw-shop-archive .tax-description,
.tw-shop-archive .woocommerce-archive-description {
	margin: 0;
	font-size: 14px;
	color: var(--tw-muted);
	text-align: right;
}

.tw-shop-archive .woocommerce-result-count {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--tw-muted);
	text-align: right;
}

/*
   select2 hides the real <select> (`.select2-hidden-accessible`) and renders
   its own 28px-tall widget, which is why sizing the <select> alone left a
   1248px x 28px control. Size the select2 wrapper instead.
 */
.tw-shop-archive .tw-shop-archive__ordering {
	margin-bottom: 18px;
}

/*
   Suppress the native <select> immediately, before Select2's JS runs.

   WooCommerce renders a real <select class="orderby filterSelect">, and
   Select2 only hides it once it initialises. In that window the select is
   still `position: absolute` at `left: -16px`, which pushed the document
   1px past the viewport (scrollWidth 769 at a 768 viewport) and flashed a
   horizontal scrollbar on every archive and category page. This is the same
   visually-hidden state Select2 ends up in, applied unconditionally.
*/
.select2-hidden-accessible {
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.tw-shop-archive .tw-shop-archive__ordering .select2-container {
	width: 220px !important;
	max-width: 100%;
}

.tw-shop-archive .tw-shop-archive__ordering .select2-selection--single {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
}

.tw-shop-archive .tw-shop-archive__ordering .select2-selection__rendered {
	color: var(--tw-text);
	font-size: 13px;
	text-align: right;
}

.tw-shop-archive .tw-shop-archive__ordering .select2-selection__arrow {
	height: 44px;
}

/* Bacola ships `.woocommerce-pagination ul.page-numbers { display:inline-flex }`
   which parks the rail on the container's left edge. Out-specify it. */
.tw-shop-archive .woocommerce-pagination {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.tw-shop-archive .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

/* --- 0.1.12: header RTL ---

   `.tw-logo-text` is a flex column, so its two spans stretch to the block
   width; with `text-align: left` inherited from `body` the English wordmark
   sat hard against the wrong edge. Same for the language pill and the
   "التسجيل" link. */
.tw-header .tw-logo,
.tw-header .tw-logo-text,
.tw-header .tw-logo-ar,
.tw-header .tw-logo-en,
.tw-header .tw-lang,
.tw-header .tw-signup {
	text-align: right;
}

/* --- 0.1.13: inline search form for the "no results" states ---

   Replaces `woocommerce_output_product_search()`, which renders nothing on
   this store. Both the field and the button keep the 44px target floor. */

.tw-inline-search {
	display: flex;
	gap: 10px;
	width: 100%;
	max-width: 520px;
	margin-top: 18px;
}

/* The type selector is deliberate: Bacola styles `input[type="search"]`
   at a higher specificity than a bare class, which capped this field at
   40px. */
input.tw-inline-search-field[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 14px;
	text-align: right;
}

input.tw-inline-search-field[type="search"]:focus-visible {
	border-color: var(--tw-accent);
	outline: 2px solid var(--tw-accent);
	outline-offset: 1px;
}

.tw-inline-search-submit {
	flex: 0 0 auto;
	min-width: 96px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	border: 0;
	border-radius: var(--tw-radius-sm);
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.tw-inline-search-submit:hover,
.tw-inline-search-submit:focus-visible {
	background: var(--tw-accent-dark);
}

/* ==========================================================================
   0.1.29 — My Account redesign (logged-in area)

   Live audit of the signed-in account pages found Bacola's defaults rendering
   the area rather than Tamween's own system:

   * `.tw-container` capped the account at 720px and `article.tw-page` at
     820px, so a form that needs horizontal room was squeezed into a column
     meant for prose.
   * Address rows rendered as `display: flex` label/field pairs, leaving the
     field roughly 320px wide on desktop with a large empty gutter beside it.
   * Inputs were 38-40px tall, under the 44px tap target used elsewhere.
   * Buttons used Bacola's blue (#233a95) rather than `--tw-accent`.
   * The navigation was a horizontal strip of Bacola tile buttons instead of a
     persistent account menu.
   * The password reveal button sat on the wrong side and inverted the field.

   This block re-asserts the Tamween tokens for the account area only. It is
   scoped to the logged-in container (`.my-account-wrapper` and friends) so the
   guest login/register forms above keep their existing treatment.
   ========================================================================== */

.account-dashboard .woocommerce-MyAccount-content > p,
.my-account-wrapper .woocommerce-MyAccount-content > p {
	margin: 0 0 12px;
}

.my-account-wrapper {
	display: grid;
	gap: 24px;
}

/* The guest login/register rules above cap `.woocommerce-MyAccount` /
   `.woocommerce-account` at 720px. Signed-in pages never match that selector
   (there is no `.woocommerce-MyAccount` wrapper in Bacola's markup), so the
   account area was still inheriting `.tw-container`'s 720px column and
   `article.tw-page`'s 820px cap. Both are widened here so the nav rail and the
   form panel get the room a dashboard needs. */
body.woocommerce-account main.tw-container,
body.woocommerce-account main .tw-container,
body.woocommerce-account main .container {
	max-width: 1120px;
}

body.woocommerce-account article.tw-page {
	max-width: 100%;
}

/* --- Navigation ---------------------------------------------------------- */

.my-account-navigation {
	margin: 0;
}

.my-account-navigation .woocommerce-MyAccount-navigation {
	width: 100%;
}

.my-account-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.my-account-navigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.my-account-navigation a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--tw-line);
	border-radius: 999px;
	background: var(--tw-surface);
	color: var(--tw-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.my-account-navigation a:hover,
.my-account-navigation a:focus-visible {
	border-color: var(--tw-accent);
	background: var(--tw-accent-soft);
	color: var(--tw-accent-dark);
}

/* WooCommerce puts `woocommerce-account` on <body>, so the `.woocommerce-account`
   selector in the guest-form rules above was matching the body element and
   capping the entire page — header included — at 720px on every signed-in
   account page. Reset the body and cap the content column instead. */
body.woocommerce-account {
	width: auto;
	max-width: none;
	margin: 0;
}

/* Outranks Bacola's active-tile state, which matches at equal specificity and
   is injected after the child stylesheet. */
body .my-account-navigation ul li.is-active > a,
body .my-account-navigation ul li.current-menu-item > a {
	border-color: var(--tw-accent) !important;
	background: var(--tw-accent) !important;
	color: #fff !important;
}

body .my-account-navigation ul li.is-active > a:hover,
body .my-account-navigation ul li.current-menu-item > a:hover {
	border-color: var(--tw-accent-dark) !important;
	background: var(--tw-accent-dark) !important;
	color: #fff !important;
}

/* Bacola renders the toggle only on small screens; keep it out of the
   desktop flow so the nav sits flush with the panel above it. */
.my-account-navigation > .account-toggle-menu {
	display: none;
}

/* --- Panel --------------------------------------------------------------- */

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.5;
}

.woocommerce-MyAccount-content p {
	margin: 0 0 12px;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.9;
}

.woocommerce-MyAccount-content a {
	color: var(--tw-accent);
	font-weight: 600;
}

.woocommerce-MyAccount-content a:hover {
	color: var(--tw-accent-dark);
}

/* --- Forms --------------------------------------------------------------- */

.woocommerce-MyAccount-content form .form-row {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-MyAccount-content form .form-row label {
	display: block;
	margin: 0 0 8px;
	color: var(--tw-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.woocommerce-MyAccount-content form .form-row label .required {
	color: #c0392b;
	text-decoration: none;
}

.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="tel"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="search"],
.woocommerce-MyAccount-content input[type="number"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.woocommerce-MyAccount-content textarea {
	min-height: 120px;
	resize: vertical;
}

.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 3px var(--tw-accent-soft);
	outline: none;
}

.woocommerce-MyAccount-content .validate-required > label:after,
.woocommerce-MyAccount-content label .required {
	color: #c0392b;
}

/* Two columns for the short paired fields (first/last name) so the panel does
   not turn into one long single-file list on desktop. */
@media (min-width: 782px) {
	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		display: inline-block;
		width: calc(50% - 8px);
		vertical-align: top;
	}

	.woocommerce-MyAccount-content form .form-row-first {
		margin-inline-end: 16px;
	}
}

.woocommerce-MyAccount-content .form-row-wide {
	clear: both;
}

/* --- Password reveal ----------------------------------------------------- */

.woocommerce-MyAccount-content .password-input,
.woocommerce-MyAccount-content .woocommerce-input__wrapper {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce-MyAccount-content .password-input input,
.woocommerce-MyAccount-content .woocommerce-input__wrapper input {
	width: 100%;
	max-width: 100%;
	padding-inline-end: 48px;
}

.woocommerce-MyAccount-content .show-password,
.woocommerce-MyAccount-content .show-password-input,
.woocommerce-MyAccount-content .woocommerce-input-show-password {
	position: absolute;
	inset-inline-end: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tw-radius-sm);
	background: transparent;
	color: var(--tw-muted);
	cursor: pointer;
}

.woocommerce-MyAccount-content .show-password:hover,
.woocommerce-MyAccount-content .show-password:focus-visible,
.woocommerce-MyAccount-content .show-password-input:hover,
.woocommerce-MyAccount-content .show-password-input:focus-visible {
	background: var(--tw-accent-soft);
	color: var(--tw-accent-dark);
}

/* --- Buttons ------------------------------------------------------------- */

.woocommerce-MyAccount-content button[type="submit"],
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 28px;
	border: 1px solid var(--tw-accent);
	border-radius: var(--tw-radius-sm);
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-MyAccount-content button[type="submit"]:focus-visible,
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .button:focus-visible {
	border-color: var(--tw-accent-dark);
	background: var(--tw-accent-dark);
	color: #fff;
}

/* --- Notices ------------------------------------------------------------- */

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-notice {
	margin: 0 0 18px;
	padding: 14px 18px;
	border: 1px solid var(--tw-line);
	border-inline-start: 3px solid var(--tw-accent);
	border-radius: var(--tw-radius-sm);
	background: var(--tw-surface);
	color: var(--tw-text);
	font-size: 14px;
	line-height: 1.85;
}

.woocommerce-MyAccount-content .woocommerce-error {
	border-inline-start-color: #c0392b;
	background: #fdf3f2;
}

.woocommerce-MyAccount-content .woocommerce-message {
	border-inline-start-color: #1f8a4c;
	background: #f2faf5;
}

.woocommerce-MyAccount-content .woocommerce-info a:not(.button) {
	color: var(--tw-accent-dark);
}

/* A notice that carries an action renders that action as a filled button, and a
   filled button needs a white label.

   The rule above has to exclude `.button` rather than simply adding this one:
   `.woocommerce-MyAccount-content .woocommerce-info a` sits at (0,2,1) and
   outranks the (0,2,0) button rule at the top of this section, so it recoloured
   the label to `--tw-accent-dark` on the `--tw-accent` fill. Measured on the live
   orders and downloads pages: `rgb(10,92,100)` on `rgb(14,124,134)` = 1.56:1, a
   hard WCAG failure. With the exclusion in place the same label computes
   `#fff` on `#0e7c86` = 4.95:1, which clears AA for this 15px/700 weight.

   The `<button class="woocommerce-Button button">` on the account-details page was
   already correct at 4.95:1, because it sits outside `.woocommerce-info` and so
   was never caught -- which is exactly why only the notice buttons looked wrong. */
.woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-MyAccount-content .woocommerce-info button.button {
	color: #fff;
}

/* Empty state: "no orders yet", "nothing to download".

   `.woocommerce-info` is a flex row, so the generic notice rules do the wrong
   thing here: `text-align: center` has no effect on flex children, and
   `.woocommerce-info .button { margin-inline-start: auto }` shoves the action to
   the far edge -- measured 251px of stray inline margin on the orders page, 179px
   on downloads. The two notices on one screen therefore rendered with completely
   different internal layouts.

   Stacking the column restores the intended centred empty state, and the margin
   shorthand clears the auto inline offset that pushed the button sideways.
   These selectors are account-scoped so they also outrank the shared
   `.woocommerce-info:has(> a)` block further up the file, which the panel rules
   in this same section were overriding on source order. */
.woocommerce-MyAccount-content .woocommerce-info:has(> a) {
	flex-direction: column;
	align-items: center;
	gap: 0;
	padding: 26px 22px;
	border-style: dashed;
	background: var(--tw-surface);
	text-align: center;
}

.woocommerce-MyAccount-content .woocommerce-info:has(> a) .button {
	margin: 16px 0 0;
}

/* The wrapper is printed even when WooCommerce has no notices to report. It is
   then an empty box that still carries `margin-bottom: 16px`, which measured as
   a 16px dead band above the first real notice on every account page. */
.woocommerce-notices-wrapper:not(:has(.woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-notice)) {
	margin-bottom: 0;
}

/* --- Password strength meter --------------------------------------------- */

.woocommerce-MyAccount-content .woocommerce-password-strength {
	display: block;
	margin: 0 0 12px;
	font-size: 13px;
	text-align: start;
}

/* --- Address overview ---------------------------------------------------- */

/* Bacola reuses Bootstrap's `.col-1` / `.col-2` width semantics inside
   `.addresses`, which resolved to 8.33% and 16.67% and squeezed both cards into
   23px and 47px slivers. Re-lay them out as an explicit grid. */
.woocommerce-MyAccount-content .addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
}

.woocommerce-MyAccount-content .addresses > .u-column1,
.woocommerce-MyAccount-content .addresses > .u-column2,
.woocommerce-MyAccount-content .addresses .col-1,
.woocommerce-MyAccount-content .addresses .col-2 {
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: none;
}

.woocommerce-MyAccount-content .woocommerce-Address {
	padding: 20px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: #fff;
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0 0 12px;
	border: 0;
	border-bottom: 1px solid var(--tw-line-soft);
}

.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
}

.woocommerce-MyAccount-content .woocommerce-Address address {
	margin: 0;
	color: var(--tw-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.95;
}

.woocommerce-MyAccount-content .woocommerce-Address .edit {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 782px) {
	.woocommerce-MyAccount-content .addresses {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* Woo's dashboard is two prose paragraphs with the actions woven into the
   sentence, so the links cannot be turned into cards without rewriting the copy.
   Padding them inline-block keeps the reading flow while lifting every action
   to a 44px hit area — links that happened to wrap a line were already 47px,
   which made the row look uneven. */
.account-dashboard .woocommerce-MyAccount-content p a,
body.woocommerce-dashboard .woocommerce-MyAccount-content p a {
	display: inline-block;
	padding-block: 12px;
	line-height: 1.5;
}

/* --- Guest login / register ----------------------------------------------- */

/* Resetting the 720px body cap (see above) let the guest login form stretch to
   the full 1088px content column, which is unreadable for two fields. Cap it to a
   comfortable single-column width and bring it onto the same tokens as the
   signed-in forms — including the password reveal, whose button uses the
   `.show-password-input` class rather than the `.show-password` the rule above
   this block targets. */
/* Reset-password turned out to be a standalone page (article.tw-page -> post 11),
   not a My Account endpoint, so it never inherits the account form rules and has
   to be listed here alongside login/register. */
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-form-coupon,
.woocommerce-ResetPassword {
	width: 100%;
	max-width: 480px;
	margin: 0 auto 40px;
	padding: 24px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
}

/* Enabling customer registration makes WooCommerce render BOTH forms inside
   `#customer_login.col2-set`, each wrapped in a Bootstrap column
   (`.u-column1.col-1` / `.u-column2.col-2`). Bacola ships the 12-grid widths,
   so `col-2` collapsed the register card to 16.6667% (181px outer, 151px form)
   and `col-1` squeezed the login card to 61px. Re-declare the columns as a
   two-up flex row that collapses to a single column on narrow screens, so each
   form can use its own 480px cap. */
#customer_login.col2-set {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px;
}

#customer_login.col2-set > .u-column1,
#customer_login.col2-set > .u-column2 {
	flex: 1 1 340px;
	width: auto;
	max-width: 480px;
	margin: 0 auto;
	padding: 0;
}

@media (max-width: 767px) {
	#customer_login.col2-set {
		gap: 20px;
	}

	#customer_login.col2-set > .u-column1,
	#customer_login.col2-set > .u-column2 {
		flex: 1 1 100%;
	}
}

.woocommerce-form-login input.input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input.input-text,
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"],
.woocommerce-form-coupon input.input-text,
.woocommerce-ResetPassword input.input-text,
.woocommerce-ResetPassword input[type="text"],
.woocommerce-ResetPassword input[type="email"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 10px 14px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
	color: var(--tw-text);
	font-family: inherit;
	font-size: 15px;
}

.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus,
.woocommerce-form-coupon input:focus,
.woocommerce-ResetPassword input:focus {
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 3px var(--tw-accent-soft);
	outline: none;
}

.woocommerce-form-login .password-input,
.woocommerce-form-register .password-input {
	position: relative;
	display: block;
	width: 100%;
}

.woocommerce-form-login .password-input input,
.woocommerce-form-register .password-input input {
	padding-inline-end: 48px;
}

.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input,
.woocommerce-form-login .show-password,
.woocommerce-form-register .show-password {
	position: absolute;
	inset-inline-end: 4px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--tw-radius-sm);
	background: transparent;
	color: var(--tw-muted);
	cursor: pointer;
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-login .woocommerce-button,
.woocommerce-form-register button[type="submit"],
.woocommerce-form-register .woocommerce-button,
.woocommerce-form-coupon button[type="submit"],
.woocommerce-form-coupon .button,
.woocommerce-ResetPassword button[type="submit"],
.woocommerce-ResetPassword .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	margin-top: 4px;
	padding: 12px 24px;
	border: 1px solid var(--tw-accent);
	border-radius: var(--tw-radius-sm);
	background: var(--tw-accent);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-login button[type="submit"]:focus-visible,
.woocommerce-form-register button[type="submit"]:hover,
.woocommerce-form-coupon button[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:hover,
.woocommerce-ResetPassword button[type="submit"]:focus-visible {
	border-color: var(--tw-accent-dark);
	background: var(--tw-accent-dark);
	color: #fff;
}

/* --- Orders list ---------------------------------------------------------- */

/* The orders table needs 392px but its Bacola wrapper (.klb-orders-style1) is
   only ~296px wide inside a 390px viewport, so the page scrolled sideways by
   34px. Woo already ships a `data-title` attribute on every cell, so on narrow
   screens each row becomes a labelled card instead of a horizontal scroll. */
@media (max-width: 782px) {
	.woocommerce-MyAccount-content .klb-orders-style1 {
		overflow: visible;
	}

	.woocommerce-MyAccount-content table.account-orders-table,
	.woocommerce-MyAccount-content table.woocommerce-orders-table {
		display: block;
		width: 100%;
		min-width: 0;
		border: 0;
	}

	.woocommerce-MyAccount-content table.account-orders-table thead,
	.woocommerce-MyAccount-content table.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-MyAccount-content table.account-orders-table tbody,
	.woocommerce-MyAccount-content table.woocommerce-orders-table tbody {
		display: block;
	}

	.woocommerce-MyAccount-content table.account-orders-table tr,
	.woocommerce-MyAccount-content table.woocommerce-orders-table tr {
		display: block;
		margin: 0 0 12px;
		border: 1px solid var(--tw-line);
		border-radius: var(--tw-radius);
		background: #fff;
		overflow: hidden;
	}

	.woocommerce-MyAccount-content table.account-orders-table td,
	.woocommerce-MyAccount-content table.woocommerce-orders-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		padding: 10px 14px;
		border: 0;
		border-bottom: 1px solid var(--tw-line-soft);
		text-align: start;
		font-size: 14px;
	}

	.woocommerce-MyAccount-content table.account-orders-table tr td:last-child,
	.woocommerce-MyAccount-content table.woocommerce-orders-table tr td:last-child {
		border-bottom: 0;
	}

	.woocommerce-MyAccount-content table.account-orders-table td::before,
	.woocommerce-MyAccount-content table.woocommerce-orders-table td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-weight: 700;
		color: var(--tw-muted);
	}
}

/* Row links were 29-32px tall, below the 44px tap target, at every width. */
.woocommerce-MyAccount-content table.account-orders-table td a,
.woocommerce-MyAccount-content table.woocommerce-orders-table td a,
.woocommerce-MyAccount-content a.woocommerce-button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-align: start;
}

/* Bacola renders the ordered products as a `.order-list` block *outside* the
   orders table, so the rule above never reaches those names. */
.woocommerce-MyAccount-content .order-list .product-name a,
.woocommerce-MyAccount-content .woocommerce-MyAccount-orders a,
.woocommerce-MyAccount-content table.woocommerce-table--order-details a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-align: start;
}

/* --- Select2 (country / state dropdowns) ---------------------------------- */

/* Select2 renders the visible dropdown itself and kept the library defaults:
   28px tall, #aaa border, 4px radius and no focus ring, so it looked pasted on
   next to the 44px bordered inputs. The native <select> is 1px wide by design,
   so only the generated markup needs styling. */
.woocommerce-MyAccount-content .select2-container {
	width: 100% !important;
	max-width: 100%;
}

.woocommerce-MyAccount-content .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	background: #fff;
}

.woocommerce-MyAccount-content .select2-container .select2-selection__rendered {
	flex: 1 1 auto;
	padding: 0 14px;
	color: var(--tw-text);
	font-size: 15px;
	line-height: 1.4;
	text-align: start;
	overflow: visible;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.woocommerce-MyAccount-content .select2-container .select2-selection__clear {
	margin-inline-end: 8px;
}

.woocommerce-MyAccount-content .select2-container .select2-selection__arrow {
	flex: 0 0 auto;
	height: 42px;
}

.woocommerce-MyAccount-content .select2-container .select2-selection__arrow b {
	border-color: var(--tw-muted) transparent transparent transparent;
}

.woocommerce-MyAccount-content .select2-container.select2-container--open .select2-selection__arrow b,
.woocommerce-MyAccount-content .select2-container .select2-selection--single:hover .select2-selection__arrow b {
	border-color: transparent transparent var(--tw-muted) transparent;
}

.woocommerce-MyAccount-content .select2-container--select2 .select2-selection--focus,
.woocommerce-MyAccount-content .select2-container--select2 .select2-selection--single:focus {
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 3px var(--tw-accent-soft);
	outline: none;
}

/* Select2 only adds the `--select2` focus class on some focus paths, so key the
   visible ring off the open state and :focus-within instead. */
.woocommerce-MyAccount-content .select2-container--open .select2-selection--single,
.woocommerce-MyAccount-content .select2-container:focus-within .select2-selection--single {
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 3px var(--tw-accent-soft);
	outline: none;
}

/* Dropdown list: same tokens, and 44px rows so the options meet the same tap
   target as the fields themselves. Select2 appends the list to <body>, so these
   rules are not scoped to the account content — they apply to every Select2
   country/state dropdown on the site, including block checkout. */
body .select2-container--default .select2-results__options {
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	box-shadow: 0 12px 28px rgba(18, 33, 43, 0.12);
}

body .select2-container--default .select2-results__option {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	font-size: 15px;
	color: var(--tw-text);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--tw-accent);
	color: #fff;
}

body .select2-container--default .select2-results__option[aria-selected],
body .select2-container--default .select2-results__option[data-selected] {
	background: var(--tw-accent-soft);
	color: var(--tw-accent-dark);
	font-weight: 700;
}

/* --- Desktop: nav becomes a vertical rail -------------------------------- */

@media (min-width: 992px) {
	.account-dashboard .my-account-wrapper,
	.woocommerce-MyAccount-content,
	body[class*="woocommerce-"] .my-account-wrapper {
		gap: 32px;
	}

	.my-account-wrapper {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	/* The nav rail and the content panel are sibling cards with the same border,
	   radius and fill, so they get the same padding. They previously used 20px
	   and 28px/30px respectively, which left the two top edges looking like
	   different components even though everything else about them matched. */
	.my-account-navigation {
		position: sticky;
		top: 24px;
		padding: 24px;
		border: 1px solid var(--tw-line);
		border-radius: var(--tw-radius);
		background: var(--tw-surface);
	}

	.my-account-navigation ul {
		flex-direction: column;
		gap: 6px;
	}

	.my-account-navigation a {
		justify-content: flex-start;
		min-height: 46px;
		padding: 12px 18px;
		border-radius: var(--tw-radius-sm);
		text-align: start;
	}

	.woocommerce-MyAccount-content {
		padding: 24px;
		border: 1px solid var(--tw-line);
		border-radius: var(--tw-radius);
		background: #fff;
	}
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 991px) {
	.my-account-wrapper {
		gap: 18px;
	}

	/* On small screens the nav collapses to the toggle button, and the panel sits
	   directly beneath it in the same grid. Bacola gives the toggle wrapper a 40px
	   bottom margin, which survives the theme's own `.my-account-navigation { margin: 0 }`
	   because its selector is more specific. The grid already supplies an 18px gap,
	   so the toggle was pushing the content 58px down -- measured 58px between the
	   bottom of the toggle and the top of the panel at both 820px and 390px. */
	.my-account-wrapper .my-account-navigation {
		margin-bottom: 0;
	}

	.my-account-navigation .account-toggle-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		width: 100%;
		min-height: 46px;
		padding: 12px 16px;
		border: 1px solid var(--tw-line);
		border-radius: var(--tw-radius-sm);
		background: var(--tw-surface);
		color: var(--tw-text);
		font-size: 15px;
		font-weight: 700;
		cursor: pointer;
	}

	/* Bacola ships the literal English word "Navigation" here. Hide its text
	   node and restore the Arabic label through a pseudo-element instead of
	   editing the parent theme. */
	.my-account-navigation .account-toggle-menu {
		font-size: 0;
	}

	.my-account-navigation .account-toggle-menu::after {
		content: "\0627\0644\0642\0627\0626\0645\0629";
		font-size: 15px;
		line-height: 1.4;
	}

	.my-account-navigation .woocommerce-MyAccount-navigation {
		border: 1px solid var(--tw-line);
		border-radius: var(--tw-radius-sm);
		background: var(--tw-surface);
	}

	.my-account-navigation ul {
		padding: 8px;
	}

	.my-account-navigation a {
		justify-content: flex-start;
		text-align: start;
	}
}

@media (max-width: 782px) {
	.woocommerce-MyAccount-content button[type="submit"],
	.woocommerce-MyAccount-content .button,
	.woocommerce-MyAccount-content a.button {
		width: 100%;
	}
}

@media (max-width: 430px) {
	.woocommerce-MyAccount-content {
		padding: 16px;
	}

	.woocommerce-MyAccount-content form .form-row-first,
	.woocommerce-MyAccount-content form .form-row-last {
		width: 100%;
		margin-inline-end: 0;
	}
}
/* ========================================================================== 0.1.48
   RTL: repair the root cause instead of whitelisting every node

   Bacola ships `body { text-align: left }`. `text-align` is inherited, so that
   one declaration is what pushes Arabic flush left in every part of the site
   that is not caught by a selector below.

   The previous passes fought it with whitelists: `body:not(.home) .container *`
   for archive pages, plus a hand-enumerated list of ~25 `.tw-main` classes for
   the front page. Both work but are brittle - any element added later that is
   not on the list silently renders left-aligned again, which is the symptom
   reported after 0.1.46.

   This fix is additive and deliberately does not set `direction`:

   1. Re-assert the logical value `start` on every wrapper the child theme uses.
      Being inherited, it repairs every descendant that does not declare its own
      alignment, in one rule, for home, archive, product and chrome alike.
      Nothing the old whitelists force to `right` is affected - `start` resolves
      to `right` under the document's `dir="rtl"`.

   2. Opt genuinely left-to-right content back in. Prices, SKUs, code and the
      search field are listed explicitly rather than guessed at, so the list
      stays short and reviewable.

   Notes for whoever edits this next:

   - Do NOT set `direction: ltr` on the breadcrumb, product meta, posted-on,
     entry-meta or order nodes. They contain Arabic; forcing LTR there is the
     very bug this block exists to remove.
   - Do NOT replace the 0.1.8 / 0.1.9 whitelists with this rule alone. They also
     override `text-align: left` that Bacola declares on individual components,
     which an inherited value cannot reach. They are load-bearing.
   ========================================================================== */

html body,
html body .tw-header,
html body .tw-main,
html body .tw-container,
html body .container,
html body .tw-footer,
html body .woocommerce,
html body #content,
html body .site-content {
	text-align: start;
}

html body .tw-logo-en,
html body .tw-lang,
html body .woocommerce-Price-amount,
html body .woocommerce-Price-currencySymbol,
html body .sku,
html body code,
html body .wc-block-components-formatted-money-amount,
html body input[type="search"],
html body .tw-search input,
html body .screen-reader-text,
html body .woocommerce-breadcrumb,
html body .breadcrumb,
html body .product_meta,
html body .posted-on,
html body .entry-meta,
html body .woocommerce-order {
	text-align: start;
}

/* ========================================================================== 0.1.48 (part 2)
   My Account: rebuild the navigation as a real sidebar, and fix the two defects
   the 0.1.46 audit surfaced.

   Measured on the live dashboard (1280px, logged in, customer id 7):

   a) Inactive links computed to `rgb(194,194,211)` on `rgb(251,252,252)` —
      about 1.8:1, a hard WCAG failure and the main reason the nav read as
      "cheap". Cause: Bacola ships `.my-account-navigation ul li a` which is
      (0,1,3) and therefore outranks this theme's `.my-account-navigation a`
      at (0,1,1), so the theme's `color: var(--tw-text)` never applied.
      Every colour below is declared through `body .my-account-navigation ul li a`
      so it actually wins.

   b) The nav was six identical 56px pills stacked in a 198px column. Same
      weight, same radius, no icons and no edge indicator, so the active item
      was the only thing that read as "selected" and even that was a flat fill.

   Icons are pure CSS, attached to WooCommerce's own endpoint classes
   (`woocommerce-MyAccount-navigation-link--<endpoint>`), so no markup is
   injected and no output buffer is involved. Codepoints are from
   remixicon 4.3.0, the version already enqueued by the theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The sidebar itself.

   Bacola ships `.my-account-wrapper .woocommerce-MyAccount-navigation ul li a`
   at specificity (0,2,3) and paints inactive links with `--color-info`
   (#c2c2d3). Measured against the near-white tile that is 1.71:1, a hard WCAG
   failure, and the reason the sidebar read as an unfinished component. The
   theme's own rules sat at (0,1,4) and lost: two class selectors outrank one
   no matter which file is later.

   Every selector below therefore mirrors Bacola's own shape so the theme wins on
   source order instead — custom.css is enqueued after base-rtl.css, and equal
   specificity resolves to the later sheet. */
/* The <ul> wrapper, not a second surface.

   `.my-account-navigation` is already a card: padding, border, radius and fill
   (measured 240x394, 20px padding, 1px #e2e8ec, 10px radius, #fbfcfc). Giving
   the <ul> inside it a white fill and a 10px radius as well put two rounded
   rectangles inside each other, one of them carrying a border-width of 0 and a
   shadow, so all it contributed was a faint ring in the gap between the panel
   edge and the first tile. The outer card is the surface; the tiles are the only
   thing inside it that should read as a box. */
.my-account-wrapper .my-account-navigation .woocommerce-MyAccount-navigation,
.my-account-wrapper .woocommerce-MyAccount-navigation {
	border-width: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Bacola sets a 1px divider on every `li + li`; with individually bordered
   tiles that would draw stray lines through the gaps. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li + li {
	border-top: 0;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 50px;
	padding: 12px 16px;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	background: var(--tw-surface);
	color: var(--tw-text);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	text-align: start;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li a:hover,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li a:focus-visible {
	background: var(--tw-accent-soft);
	border-color: var(--tw-accent);
	color: var(--tw-accent-dark);
}

/* Bacola puts a full-width 2px underline here. The active state gets a 4px
   marker on the inline-start edge instead, which is what makes the current
   section findable in a six-item column. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li a::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: 4px;
	height: auto;
	background: var(--tw-accent);
	opacity: 0;
	transition: opacity 0.18s ease;
}

/* `font-family` here is load-bearing, not decoration.

   The theme enqueues remixicon, but remixicon only applies its @font-face to
   `[class^="ri-"], [class*=" ri-"]`. The injected element is a bare
   `<i class="ri">` -- the glyph is chosen by the `::before` rules further down,
   not by a utility class -- so that selector never matches, the icon font is
   never applied, and the Private Use Area codepoints below render in the
   inherited body font. Measured on the live account pages: the element computed
   `font-family: Dosis, sans-serif` at 12x19 with no visible glyph. Declaring the
   family explicitly is what actually puts the font on the element.

   The remaining properties mirror remixicon's own base rule so the glyph renders
   with the same metrics and antialiasing as a stock `ri-*` icon. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li a > i.ri {
	flex: 0 0 auto;
	margin: 0;
	font-family: 'remixicon';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	font-size: 19px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	speak: never;
	color: var(--tw-muted);
	transition: color 0.18s ease;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li a:hover > i.ri,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li a:focus-visible > i.ri {
	color: var(--tw-accent-dark);
}

/* Glyphs keyed off the endpoint class WooCommerce already emits, so no markup
   is invented and nothing breaks if an endpoint is renamed. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard > a > i.ri::before { content: "\ec12"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders > a > i.ri::before { content: "\f458"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads > a > i.ri::before { content: "\ec54"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address > a > i.ri::before { content: "\ef0a"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account > a > i.ri::before { content: "\f26e"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods > a > i.ri::before { content: "\ea92"; }
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout > a > i.ri::before { content: "\eeda"; }

/* Active: filled tile plus the edge marker. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--tw-accent);
	border-color: var(--tw-accent);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(14, 124, 134, 0.22);
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a::before {
	opacity: 1;
	background: #fff;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a > i.ri {
	color: #fff;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a:hover,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a:focus-visible {
	background: var(--tw-accent-dark);
	border-color: var(--tw-accent-dark);
	color: #fff;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a:hover > i.ri,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.is-active a:focus-visible > i.ri {
	color: #fff;
}

/* Logout is a different kind of action, so it is separated from the section
   list and coloured as destructive rather than as another destination. */
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--tw-line);
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
	background: #fdf3f2;
	border-color: #f2d5d2;
	color: #b3261e;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a > i.ri {
	color: #b3261e;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible {
	background: #b3261e;
	border-color: #8f1d17;
	color: #fff;
}

.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover > i.ri,
.my-account-wrapper .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:focus-visible > i.ri {
	color: #fff;
}

/* --- The RTL defect the report was about ---------------------------------
   Live: `<p>مرحباً …</p>` on the dashboard computed `direction: rtl` but
   `text-align: left`, so Arabic hugged the wrong edge. Bacola declares an
   explicit `text-align` on that node, and an inherited value cannot beat an
   explicit one, which is why the wrapper-level rule above did not reach it.
   `.woocommerce-MyAccount-content` is the panel the dashboard, orders,
   addresses, downloads and details pages all render into, so fixing it here
   covers every signed-in page at once.

   The selector carries `body` to outrank Bacola, and deliberately does not
   touch `.my-account-navigation`, whose links are centred/edge-aligned on
   purpose. */
body .woocommerce-MyAccount-content p,
body .woocommerce-MyAccount-content h1,
body .woocommerce-MyAccount-content h2,
body .woocommerce-MyAccount-content h3,
body .woocommerce-MyAccount-content h4,
body .woocommerce-MyAccount-content h5,
body .woocommerce-MyAccount-content li,
body .woocommerce-MyAccount-content dd,
body .woocommerce-MyAccount-content dt,
body .woocommerce-MyAccount-content label,
body .woocommerce-MyAccount-content legend,
body .woocommerce-MyAccount-content td,
body .woocommerce-MyAccount-content th,
body .woocommerce-MyAccount-content address,
body .woocommerce-MyAccount-content blockquote {
	text-align: right;
}

/* ========================================================================== 0.1.50
   Single-product page: layout, related grid, mobile overflow and contrast.

   1. The related-products section was rendering its heading and its product
      grid as the first two tracks of a 4-column grid, collapsing every card
      to ~69px. See the note above `section.related.products`.
   2. `div.product` was a 5fr/6fr grid, so the H1/SKU block sat in its own
      column beside the gallery + buy panel. See `.single-product div.product`.
   3. Phones narrower than ~388px scrolled sideways. See the note above
      `.tw-single-product .product-content`.
   4. Breadcrumb current item and the in-stock pill failed WCAG AA contrast.
   ========================================================================== */

/* ========================================================================== 0.1.49
   One dynamic form for signing in and signing up.

   Replaces WooCommerce's two-column `u-columns col2-set` account layout. The
   markup is printed by `tamween_render_auth_form()`; this block only dresses it.
   The active mode arrives already applied server-side, so the card is fully
   usable before (or without) JavaScript — the script layer only removes the need
   for a page load when the visitor switches between the two modes.
   ========================================================================== */

/* Regions for the inactive mode carry the `hidden` *attribute*, which is what
   js/custom.js toggles (`region.hidden = !visible`), so this rule has to key off
   the attribute and nothing else. The UA stylesheet would already hide these, but
   several rules below set a `display` of their own on the same elements, and a
   class selector outranks the UA rule, so it is reasserted here.

   An earlier revision emitted `hidden` as a *class* on the field, row and extra
   wrappers and matched both spellings. The class survived `region.hidden = false`,
   so the `!important` rule pinned the freshly switched-to region hidden and the
   tab switch silently stopped revealing the email field. Server markup and script
   now share one mechanism: the attribute. */
.tw-auth [hidden] {
	display: none !important;
}

.tw-auth {
	display: block;
	text-align: start;
}

.tw-auth .tw-auth__card {
	box-sizing: border-box;
	max-width: 520px;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px);
	border: 1px solid var(--tw-line);
	border-radius: calc(var(--tw-radius) * 2.2);
	background: var(--tw-surface);
	box-shadow: 0 18px 44px rgba(18, 33, 43, 0.07);
}

/* --- heading --------------------------------------------------------------- */
.tw-auth .tw-auth__title {
	margin: 0 0 6px;
	color: var(--tw-text);
	font-size: clamp(22px, 3.4vw, 28px);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

.tw-auth .tw-auth__sub {
	margin: 0 0 24px;
	color: var(--tw-muted);
	font-size: 15px;
	line-height: 1.75;
}

/* --- segmented switch ------------------------------------------------------
   The active tab is the raised one rather than a thumb slid across a track. A
   translated thumb would have to be mirrored for RTL, and this reads the same in
   either direction without any direction-specific math. */
.tw-auth .tw-auth__switch {
	display: flex;
	gap: 4px;
	margin-bottom: 24px;
	padding: 5px;
	border-radius: 999px;
	background: var(--tw-accent-soft);
}

.tw-auth .tw-auth__tab {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 10px;
	border-radius: 999px;
	color: var(--tw-accent-dark);
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tw-auth .tw-auth__tab.is-active {
	background: var(--tw-surface);
	color: var(--tw-accent);
	box-shadow: 0 2px 8px rgba(14, 124, 134, 0.16);
}

.tw-auth .tw-auth__tab:focus-visible {
	outline: 2px solid var(--tw-accent);
	outline-offset: 2px;
}

/* --- fields ---------------------------------------------------------------- */
.tw-auth .tw-auth__field {
	margin-bottom: 16px;
}

.tw-auth .tw-auth__label {
	display: block;
	margin-bottom: 7px;
	color: var(--tw-text);
	font-size: 14px;
	font-weight: 600;
}

.tw-auth .tw-auth__req {
	color: #b3261e;
}

.tw-auth .tw-auth__input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1.5px solid var(--tw-line);
	border-radius: 14px;
	background: #fff;
	color: var(--tw-text);
	/* 16px is also what stops iOS Safari zooming in when a field is focused. */
	font-size: 16px;
	font-family: inherit;
	line-height: 1.4;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tw-auth .tw-auth__input::placeholder {
	color: #9aabb4;
	opacity: 1;
}

.tw-auth .tw-auth__input:focus {
	outline: none;
	border-color: var(--tw-accent);
	box-shadow: 0 0 0 4px rgba(14, 124, 134, 0.14);
}

.tw-auth .tw-auth__pw {
	position: relative;
}

.tw-auth .tw-auth__input--pw {
	padding-inline-end: 52px;
}

.tw-auth .tw-auth__eye {
	position: absolute;
	inset-inline-end: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--tw-muted);
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease;
}

.tw-auth .tw-auth__eye:hover,
.tw-auth .tw-auth__eye:focus-visible {
	background: var(--tw-accent-soft);
	color: var(--tw-accent-dark);
}

/* --- remember me + lost password ------------------------------------------- */
.tw-auth .tw-auth__row--login {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 20px;
}

.tw-auth .tw-auth__check {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--tw-text);
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
	user-select: none;
}

/* Kept in the accessibility tree and focusable, only visually replaced. */
.tw-auth .tw-auth__check input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tw-auth .tw-auth__box {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 21px;
	height: 21px;
	border: 1.5px solid var(--tw-line);
	border-radius: 6px;
	background: #fff;
	color: #fff;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tw-auth .tw-auth__box svg {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.tw-auth .tw-auth__check input:checked ~ .tw-auth__box {
	background: var(--tw-accent);
	border-color: var(--tw-accent);
}

.tw-auth .tw-auth__check input:checked ~ .tw-auth__box svg {
	opacity: 1;
	transform: scale(1);
}

.tw-auth .tw-auth__check input:focus-visible ~ .tw-auth__box {
	box-shadow: 0 0 0 4px rgba(14, 124, 134, 0.18);
}

.tw-auth .tw-auth__lost {
	color: var(--tw-accent-dark);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.tw-auth .tw-auth__lost:hover {
	text-decoration: underline;
}

/* --- registration-only extras ---------------------------------------------- */
.tw-auth .tw-auth__extra {
	margin-bottom: 20px;
}

.tw-auth .tw-auth__privacy {
	color: var(--tw-muted);
	font-size: 13px;
	line-height: 1.8;
}

.tw-auth .tw-auth__privacy p {
	margin: 0;
}

tw-order-attribution-inputs {
	display: block;
}

/* --- submit ---------------------------------------------------------------- */
.tw-auth .tw-auth__actions {
	display: block;
}

.tw-auth .tw-auth__submit {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 14px 20px;
	border: 0;
	border-radius: 14px;
	background: var(--tw-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: inherit;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(14, 124, 134, 0.24);
	transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tw-auth .tw-auth__submit:hover,
.tw-auth .tw-auth__submit:focus-visible {
	background: var(--tw-accent-dark);
	color: #fff;
	box-shadow: 0 14px 28px rgba(14, 124, 134, 0.3);
}

.tw-auth .tw-auth__submit:active {
	transform: translateY(1px);
}

.tw-auth .tw-auth__submit:focus-visible {
	outline: 2px solid var(--tw-accent-dark);
	outline-offset: 3px;
}

/* --- mode prompt under the form -------------------------------------------- */
.tw-auth .tw-auth__alt {
	margin: 20px 0 0;
	color: var(--tw-muted);
	font-size: 14.5px;
	text-align: center;
}

.tw-auth .tw-auth__altlink {
	color: var(--tw-accent-dark);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.tw-auth .tw-auth__altlink:hover,
.tw-auth .tw-auth__altlink:focus-visible {
	border-bottom-color: currentColor;
}

/* --- errors raised by WooCommerce ------------------------------------------
   `woocommerce-error` carries the validation notices, so it has to sit directly
   above the form rather than in a notice wrapper further up the page. */
.tw-auth .tw-auth__card .woocommerce-error,
.woocommerce-MyAccount-content .woocommerce-error {
	border: 1px solid #f2d5d2;
	border-radius: 14px;
	background: #fdf3f2;
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 782px) {
	.tw-auth__card {
		max-width: none;
		padding: 24px 20px;
		border-radius: 18px;
		box-shadow: 0 8px 24px rgba(18, 33, 43, 0.05);
	}

	.tw-auth__sub {
		margin-bottom: 20px;
	}
}

@media (max-width: 400px) {
	.tw-auth__card {
		padding: 20px 16px;
	}

	.tw-auth__row--login {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.tw-auth__tab {
		font-size: 13.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tw-auth *,
	.tw-auth *::before,
	.tw-auth *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}
/* ==========================================================================
   0.1.52 — Header navigation drawer

   Audit finding: `.tw-header` had no department navigation at any breakpoint.
   `.tw-header-inner` contained only the brand, the search form and the action
   cluster, so "كل المنتجات" and the categories were reachable exclusively from
   the homepage tiles and the footer. On a 390x780 phone the header also
   measured 164px (21% of the viewport) because the max-width:767px block set
   `.tw-brand { width: 100% }` on a `flex-wrap: wrap` row, pushing `.tw-actions`
   onto a second line.

   Three fixes here:

   1. The burger + `.tw-nav-drawer` panel (markup in header.php), revealed at
      the same 1023px breakpoint where the existing `@media (max-width: 1023px)`
      rule already strips `.tw-lang` / `.tw-signup` / `.tw-sep`. Above that the
      approved desktop header is left untouched — the burger stays hidden, so
      the drawer markup costs desktop nothing but also adds no desktop nav.
   2. A single-row mobile header: `flex-wrap: nowrap` plus `width: auto` on the
      brand, which drops the sticky header from 164px to ~63px.
   3. `.tw-header.is-condensed` drops the 56px search row once the shopper
      scrolls, so the sticky bar keeps the logo, burger and cart without holding
      the search field hostage. Condensing is JS-driven and therefore
      progressive: with JS blocked the header is simply the shorter row.

   Everything is keyed off a single `body.tw-nav-open` class rather than
   per-element state, so the burger icon swap, the scrim and the panel can
   never disagree about whether the drawer is open.

   Naming is `tw-nav-*` on purpose: `setupDrawer()` in js/custom.js already owns
   `[data-tw-drawer-open]` / `[data-tw-drawer-close]` for the shop filter panel
   in shop-filters.php, and reusing those attributes would make the two
   drawers fight over one another.
   ========================================================================== */

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

/* --- Burger ---------------------------------------------------------- */

.tw-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	color: var(--tw-text);
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.tw-burger:hover,
.tw-burger:focus-visible {
	background: var(--tw-accent-soft);
	border-color: var(--tw-accent);
}

.tw-burger .tw-burger-x {
	display: none;
}

body.tw-nav-open .tw-burger .tw-burger-bars {
	display: none;
}

body.tw-nav-open .tw-burger .tw-burger-x {
	display: block;
}

@media (max-width: 1023px) {
	.tw-burger {
		display: inline-flex;
	}
}

/* --- Scrim ----------------------------------------------------------- */

.tw-nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: rgba(18, 33, 43, 0.45);
	opacity: 0;
	/* An opacity:0 overlay still receives pointer events, so a closed scrim
	   without this would quietly swallow every click on the page. */
	pointer-events: none;
	transition: opacity 0.24s ease;
}

/* `hidden` is set by the markup for the no-JS/SSR state; the open state is
   driven by the body class so the opacity transition still runs. */
body.tw-nav-open .tw-nav-scrim {
	opacity: 1;
	pointer-events: auto;
}

/* --- Panel ----------------------------------------------------------- */

.tw-nav-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 901;
	width: min(360px, 86vw);
	visibility: hidden;
	pointer-events: none;
}

body.tw-nav-open .tw-nav-drawer {
	visibility: visible;
	pointer-events: auto;
}

.tw-nav-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	max-height: 100vh;
	max-height: 100dvh;
	padding: 18px 16px 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--tw-bg);
	box-shadow: 8px 0 30px rgba(18, 33, 43, 0.16);
	transform: translateX(-100%);
	transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

body.tw-nav-open .tw-nav-panel {
	transform: translateX(0);
}

.tw-nav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--tw-line-soft);
}

.tw-nav-title {
	font-size: 17px;
	font-weight: var(--tw-heading);
}

.tw-nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--tw-bg-soft);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius-sm);
	color: var(--tw-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.tw-nav-close:hover,
.tw-nav-close:focus-visible {
	background: var(--tw-accent-soft);
	border-color: var(--tw-accent);
}

.tw-nav-search .tw-search-box {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 0 6px 0 12px;
	background: var(--tw-bg-soft);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
}

.tw-nav-search .tw-search-box input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 42px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--tw-text);
	font-family: var(--tw-font);
	font-size: 15px;
}

.tw-nav-group ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-nav-group li + li {
	border-top: 1px solid var(--tw-line-soft);
}

.tw-nav-group a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 48px;
	padding: 10px 2px;
	color: var(--tw-text);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.tw-nav-group a:hover,
.tw-nav-group a:focus-visible {
	color: var(--tw-accent);
}

.tw-nav-group a i {
	flex: 0 0 auto;
	color: var(--tw-muted);
	font-size: 15px;
}

.tw-nav-group--soft a {
	min-height: 44px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tw-muted);
}

/* --- Single-row mobile header ---------------------------------------- */

@media (max-width: 767px) {
	/* Override the wrap rule above: the brand and the actions must share one
	   line or the sticky header eats 21% of a phone viewport. */
	.tw-header-inner {
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		min-height: 0;
		padding-block: 8px;
	}

	.tw-brand {
		width: auto;
		height: auto;
		min-width: 0;
	}
}

/* --- Condense on scroll --------------------------------------------- */

.tw-header.is-condensed .tw-search-mobile {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tw-nav-panel,
	.tw-nav-scrim {
		transition-duration: 0.01ms !important;
	}
}