/**
 * MY AI FASHION STUDIO — Customer Portal (storefront).
 *
 * Ported from Noemi Customer Portal Pro 5.18.0 (assets/frontend/css/portal.css).
 *
 * House rules for this file:
 *
 * 1. Everything is driven by the `--aifgp-*` custom properties that
 *    Portal_Design_Tokens::css() prints inline, scoped to `.aifg-portal`.
 *    Every var() carries a literal fallback, so the portal still looks right
 *    if that inline block never made it onto the page.
 * 2. This runs inside a theme nobody here controls: every rule is scoped under
 *    `.aifg-portal`, there is no reset, and no bare element selector escapes
 *    that scope. The two exceptions are the wishlist heart on a product page
 *    and the address selector on the checkout — both are printed outside the
 *    portal wrapper by their modules, both carry an `aifg-portal-` class that
 *    cannot collide, and both are marked below.
 * 3. RTL is first class (the source shop is Hebrew): logical properties only,
 *    no `left` / `right` anywhere.
 * 4. Every `!important` carries a comment naming the theme rule it has to
 *    beat. There are three places: the primary button's label colour, the
 *    screen-reader-only utility, and the reduced-motion override (which can
 *    only do its job by outranking the transitions set above it).
 */

/* =====================================================================
 * 1. Root
 * ===================================================================== */

.aifg-portal,
.aifg-portal *,
.aifg-portal *::before,
.aifg-portal *::after {
	box-sizing: border-box;
}

.aifg-portal {
	/* The portal is laid out against the width it was actually given, not the
	   width of the window: an opinionated theme hands a shortcode a 540px
	   column inside a 1440px viewport, and a viewport media query cannot see
	   that. Section 18 queries this container; the fallback there covers
	   engines without container queries. */
	container-type: inline-size;
	container-name: aifgportal;

	/* `container-type: inline-size` also applies inline-size containment, and a
	   contained box contributes nothing to its parent's intrinsic width. In a
	   block parent that is harmless — the width comes from the parent. In any
	   shrink-to-fit context it is fatal: a theme that makes the account content
	   a flex row collapses the portal to its padding (measured: 32px inside a
	   330px column), every card then spills out of it, and a customer name
	   breaks mid-word. The width has to be definite, so it is stated here, and
	   the flex shorthand is stated with it because a flex item ignores `width`
	   as a basis only when its parent is a flex container — where `100%` as the
	   basis is exactly what is wanted. Both are inert in a plain block parent,
	   which is the normal case. */
	inline-size: 100%;
	flex: 1 1 100%;

	/* Values the tokens deliberately do not cover, derived from the shop's own
	   palette so they follow it in either direction. */
	--aifgp-placeholder: color-mix(in srgb, var(--aifgp-text, #241F19) 8%, var(--aifgp-surface, #FFFFFF));
	--aifgp-ring: 0 0 0 1px color-mix(in srgb, var(--aifgp-text, #241F19) 8%, transparent);

	font-family: var(--aifgp-font, system-ui, -apple-system, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.6;
	color: var(--aifgp-text, #241F19);
	background: var(--aifgp-bg, #FAF7F2);
	border-radius: var(--aifgp-radius, 14px);
	padding: clamp(16px, 3vw, 40px);
	/* A theme that lets a child overflow must not create a page scrollbar. */
	max-inline-size: 100%;
	overflow-x: clip;
}

/* Very old engines ignore `clip`; `hidden` is the same guarantee there. */
@supports not (overflow: clip) {
	.aifg-portal {
		overflow-x: hidden;
	}
}

.aifg-portal h1,
.aifg-portal h2,
.aifg-portal h3 {
	margin: 0;
	font-family: var(--aifgp-font-heading, var(--aifgp-font, system-ui, sans-serif));
	font-weight: var(--aifgp-heading-weight, 600);
	color: var(--aifgp-text, #241F19);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.aifg-portal h1 { font-size: var(--aifgp-size-h1, 25px); }
.aifg-portal h2 { font-size: var(--aifgp-size-h2, 23px); }
.aifg-portal h3 { font-size: var(--aifgp-size-h3, 19px); }

.aifg-portal p {
	margin: 0 0 12px;
}

.aifg-portal p:last-child {
	margin-block-end: 0;
}

.aifg-portal a {
	color: inherit;
	text-decoration: none;
}

.aifg-portal img {
	max-inline-size: 100%;
}

.aifg-portal :focus-visible {
	outline: 2px solid var(--aifgp-primary, #1F1B16);
	outline-offset: 2px;
}

/* A page that is not a WooCommerce template may not ship this core class. */
.aifg-portal .screen-reader-text {
	position: absolute !important; /* Beats a theme's `position: static` on generic utility classes. */
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * 2. Shell — header, sidebar, main
 * ===================================================================== */

.aifg-portal-head {
	inline-size: 100%;
	margin-block-end: 22px;
	padding-block-end: 18px;
	border-block-end: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal-head__title {
	margin: 0;
	font-size: clamp(22px, 2.4vw, 32px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--aifgp-text, #241F19);
}

.aifg-portal-shell {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.aifg-portal-side {
	position: sticky;
	inset-block-start: 24px;
	min-inline-size: 0;
	padding: 20px 14px;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
}

.aifg-portal-main {
	min-inline-size: 0;
}

/* ---- Section bar ----------------------------------------------------
   A row that holds the header widgets on a desktop and becomes the phone
   application's title bar below 600px. The title is printed on every screen
   so the markup does not change with the viewport, and hidden here. */

.aifg-portal-topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.aifg-portal-topbar__title {
	display: none;
	margin: 0;
	min-inline-size: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--aifgp-text, #241F19);
}

/* The unread badge hangs 4px past the bell, and this row sits flush against
   the inline edge of the content box, so the overhang had nowhere to go and
   `overflow-x: clip` on the portal sliced it. */
.aifg-portal-main__actions {
	padding-inline: 4px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-block-end: 12px;
}

.aifg-portal-main__actions:empty {
	display: none;
}

/* ---- Identity ---- */

.aifg-portal-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 10px 18px;
	margin-block-end: 12px;
	border-block-end: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal-user__photo {
	display: block;
	flex: 0 0 auto;
	inline-size: 52px;
	block-size: 52px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	border: 2px solid var(--aifgp-accent, #B8905F);
}

/* Themes ship a generic `img { height: auto }` that leaves a void under the
   portrait, so the fill is made geometric rather than cascade-dependent. */
.aifg-portal-user__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
	margin: 0;
}

/* No portrait uploaded: the wrapper holds core's get_avatar() markup, whose
   `img.avatar` carries its own width/height attributes and is a favourite
   target of theme rules. The frame is enforced here rather than inherited. */
.aifg-portal-user__photo--gravatar {
	background: var(--aifgp-placeholder, rgba(0, 0, 0, .05));
}

.aifg-portal-user__photo--gravatar img,
.aifg-portal-user__photo--gravatar .avatar {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
}

.aifg-portal-user__meta {
	min-inline-size: 0;
}

.aifg-portal-user__hello {
	display: block;
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal-user__name {
	display: block;
	font-size: 1.05em;
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* The portrait is worth more room than the greeting when there is one. */
.aifg-portal-user.has-photo {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.aifg-portal-user.has-photo .aifg-portal-user__photo {
	inline-size: 96px;
	block-size: 96px;
}

.aifg-portal-user.has-photo .aifg-portal-user__meta {
	inline-size: 100%;
}

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

.aifg-portal-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.aifg-portal-nav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: var(--aifgp-radius-sm, 8px);
	color: var(--aifgp-muted, #8A8178);
	font-weight: 500;
	font-size: var(--aifgp-size-sm, 14px);
	transition: background-color .18s ease, color .18s ease;
}

.aifg-portal-nav__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.aifg-portal-nav__label {
	min-inline-size: 0;
}

.aifg-portal-nav__badge {
	margin-inline-start: auto;
	min-inline-size: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
	font-size: .78em;
	font-weight: 700;
	text-align: center;
}

.aifg-portal-nav__item:hover,
.aifg-portal-nav__item:focus-visible {
	background: var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
	color: var(--aifgp-text, #241F19);
}

.aifg-portal-nav__item.is-active {
	background: var(--aifgp-primary, #1F1B16);
	color: var(--aifgp-on-primary, #FFFFFF);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
}

.aifg-portal-nav__item.is-active .aifg-portal-nav__badge {
	background: color-mix(in srgb, var(--aifgp-on-primary, #FFFFFF) 22%, transparent);
	color: var(--aifgp-on-primary, #FFFFFF);
}

.aifg-portal-nav__item--logout {
	margin-block-start: 10px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: 0 0 var(--aifgp-radius-sm, 8px) var(--aifgp-radius-sm, 8px);
}

.aifg-portal-nav__item--logout:hover,
.aifg-portal-nav__item--logout:focus-visible {
	background: transparent;
	color: var(--aifgp-danger, #D2493F);
}

/* =====================================================================
 * 3. Page furniture
 * ===================================================================== */

.aifg-portal-page-head {
	margin-block-end: 24px;
}

.aifg-portal-page-sub {
	margin: 6px 0 0;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal-title {
	margin: 0;
}

.aifg-portal-subtitle {
	margin: 0;
	font-size: var(--aifgp-size-h3, 19px);
}

.aifg-portal-tab-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-block-end: 18px;
}

.aifg-portal-card {
	padding: clamp(18px, 2.5vw, 28px);
	margin-block-end: 24px;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
}

.aifg-portal-card:last-child {
	margin-block-end: 0;
}

.aifg-portal-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 18px;
}

.aifg-portal-link {
	color: var(--aifgp-primary, #1F1B16);
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
	border-block-end: 1px solid transparent;
	transition: border-color .18s ease;
}

.aifg-portal-link:hover,
.aifg-portal-link:focus-visible {
	border-block-end-color: var(--aifgp-primary, #1F1B16);
}

.aifg-portal-empty {
	padding: 36px 16px;
	text-align: center;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal-empty .aifg-portal-btn {
	margin-block-start: 14px;
}

.aifg-portal-hint {
	margin: 0;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
	line-height: 1.55;
}

.aifg-portal-hint-inline {
	font-weight: 400;
	font-size: .85em;
	color: var(--aifgp-muted, #8A8178);
}

/* =====================================================================
 * 4. Buttons
 * ===================================================================== */

.aifg-portal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--aifgp-radius-sm, 8px);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-sm, 14px);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	/* An `<a>` carrying this class is a button, not a link — and the rule that
	   strips underlines is scoped to the portal wrapper, which the avatar-guide
	   overlay sits outside of. Stated here so the class is self-sufficient. */
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .1s ease, opacity .18s ease;
}

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

.aifg-portal-btn[disabled],
.aifg-portal-btn.is-busy {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
}

.aifg-portal-btn--primary,
.aifg-portal a.aifg-portal-btn--primary,
.aifg-portal a.aifg-portal-btn--primary:visited {
	background: var(--aifgp-primary, #1F1B16);
	/* Themes colour every `.entry-content a` with their own link colour and win
	   on specificity; the label on a solid button must stay legible. */
	color: var(--aifgp-on-primary, #FFFFFF) !important;
}

.aifg-portal-btn--primary:hover,
.aifg-portal a.aifg-portal-btn--primary:hover,
.aifg-portal a.aifg-portal-btn--primary:focus {
	background: var(--aifgp-primary-hover, #3A342C);
	color: var(--aifgp-on-primary, #FFFFFF) !important; /* Same theme `a:hover` rule. */
}

.aifg-portal-btn--ghost {
	background: transparent;
	border-color: var(--aifgp-border, #E8E1D7);
	color: var(--aifgp-text, #241F19);
}

.aifg-portal-btn--ghost:hover,
.aifg-portal-btn--ghost:focus-visible {
	border-color: var(--aifgp-primary, #1F1B16);
	color: var(--aifgp-primary, #1F1B16);
}

.aifg-portal-btn--sm {
	padding: 6px 12px;
	font-size: .85em;
}

/* =====================================================================
 * 5. Badges
 * ===================================================================== */

.aifg-portal-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
	font-size: .82em;
	font-weight: 600;
	white-space: nowrap;
}

.aifg-portal-badge--completed {
	background: var(--aifgp-success-soft, rgba(47, 158, 104, .13));
	color: var(--aifgp-success, #2F9E68);
}

.aifg-portal-badge--processing {
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-badge--pending,
.aifg-portal-badge--on-hold,
.aifg-portal-badge--checkout-draft {
	background: var(--aifgp-muted-soft, rgba(138, 129, 120, .14));
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal-badge--cancelled,
.aifg-portal-badge--failed,
.aifg-portal-badge--refunded {
	background: var(--aifgp-danger-soft, rgba(210, 73, 63, .12));
	color: var(--aifgp-danger, #D2493F);
}

.aifg-portal-badge--info {
	background: var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
	color: var(--aifgp-primary, #1F1B16);
}

/* =====================================================================
 * 6. KPI row and quick links (dashboard)
 * ===================================================================== */

.aifg-portal-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
	gap: 16px;
	margin-block-end: 24px;
}

.aifg-portal-kpi {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px;
	min-inline-size: 0;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
	transition: border-color .18s ease, transform .18s ease;
}

a.aifg-portal-kpi:hover,
a.aifg-portal-kpi:focus-visible {
	border-color: var(--aifgp-accent, #B8905F);
	transform: translateY(-2px);
}

.aifg-portal-kpi > div {
	min-inline-size: 0;
}

.aifg-portal-kpi-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-kpi-value {
	display: block;
	font-family: var(--aifgp-font-heading, var(--aifgp-font, system-ui, sans-serif));
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

/* wc_price() wraps the amount in its own span; it must not inherit a link
   colour from the theme when the whole KPI is an anchor. */
.aifg-portal-kpi-value .woocommerce-Price-amount {
	color: inherit;
}

.aifg-portal-kpi-label {
	display: block;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal-quicklinks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
	gap: 12px;
}

.aifg-portal-quicklink {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	min-inline-size: 0;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.aifg-portal-quicklink:hover,
.aifg-portal-quicklink:focus-visible {
	border-color: var(--aifgp-accent, #B8905F);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	transform: translateY(-2px);
}

.aifg-portal-quicklink__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-quicklink__label {
	min-inline-size: 0;
}

.aifg-portal-quicklink__badge {
	margin-inline-start: auto;
	min-inline-size: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--aifgp-accent, #B8905F);
	color: var(--aifgp-on-primary, #FFFFFF);
	font-size: .78em;
	font-weight: 700;
	text-align: center;
}

/* =====================================================================
 * 7. Tables (orders, dashboard)
 * ===================================================================== */

.aifg-portal-table-wrap {
	overflow-x: auto;
	/* An inner scroller must never become a page scroller. */
	max-inline-size: 100%;
}

.aifg-portal-table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal-table th {
	padding: 10px 12px;
	text-align: start;
	color: var(--aifgp-muted, #8A8178);
	font-weight: 600;
	white-space: nowrap;
	border-block-end: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal-table td {
	padding: 14px 12px;
	vertical-align: middle;
	border-block-end: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal-table tbody tr {
	transition: background-color .15s ease;
}

.aifg-portal-table tbody tr:hover {
	background: var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal-table tbody tr:last-child td {
	border-block-end: none;
}

.aifg-portal-order-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.aifg-portal-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-block-start: 20px;
}

.aifg-portal-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 38px;
	block-size: 38px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	color: var(--aifgp-muted, #8A8178);
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.aifg-portal-page-link:hover,
.aifg-portal-page-link:focus-visible {
	border-color: var(--aifgp-primary, #1F1B16);
	color: var(--aifgp-primary, #1F1B16);
}

.aifg-portal-page-link.is-active {
	background: var(--aifgp-primary, #1F1B16);
	border-color: var(--aifgp-primary, #1F1B16);
	color: var(--aifgp-on-primary, #FFFFFF);
}

/* =====================================================================
 * 8. Product grid (wishlist, recently viewed)
 * ===================================================================== */

.aifg-portal-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 20px;
}

.aifg-portal-product {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	overflow: hidden;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
	transition: box-shadow .2s ease, transform .2s ease, opacity .25s ease;
}

.aifg-portal-product:hover {
	box-shadow: var(--aifgp-shadow, 0 8px 24px rgba(20, 15, 10, .07));
	transform: translateY(-2px);
}

/* Removed from the wishlist: the card fades before the JS drops it. */
.aifg-portal-product.is-leaving {
	opacity: 0;
	transform: none;
}

.aifg-portal-product-media {
	display: block;
	background: var(--aifgp-placeholder, rgba(0, 0, 0, .05));
}

.aifg-portal-product-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.aifg-portal-product-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 16px;
	min-inline-size: 0;
}

.aifg-portal-product-title {
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.aifg-portal-product-title:hover,
.aifg-portal-product-title:focus-visible {
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-product-price {
	color: var(--aifgp-accent, #B8905F);
	font-weight: 700;
}

.aifg-portal-product-price del {
	opacity: .55;
	font-weight: 400;
}

.aifg-portal-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 8px;
}

.aifg-portal-product-actions .aifg-portal-btn {
	flex: 1 1 auto;
}

/* =====================================================================
 * 9. Forms
 * ===================================================================== */

/* Themes give `form` a margin, a border or a panel background of their own.
   The profile form already sits inside a card that provides all three, so the
   theme's version has to go. (The address form is itself the card — it carries
   `aifg-portal-card` — so it only needs its side margins neutralised.) */
.aifg-portal .aifg-portal-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.aifg-portal form#aifg-portal-addr-form {
	margin-inline: 0;
	margin-block-start: 0;
}

.aifg-portal-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-block-end: 18px;
}

.aifg-portal-field {
	min-inline-size: 0;
}

/* The profile tab wraps a label and an input in a div; the address form makes
   the field itself a label with a span inside. Both must read the same. */
.aifg-portal-field > label,
.aifg-portal-field > span {
	display: block;
	margin-block-end: 6px;
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal-field input[type="text"],
.aifg-portal-field input[type="tel"],
.aifg-portal-field input[type="email"],
.aifg-portal-field input[type="date"],
.aifg-portal-field input[type="number"],
.aifg-portal-field input[type="search"],
.aifg-portal-field select {
	inline-size: 100%;
	padding: 12px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aifg-portal-field input:focus,
.aifg-portal-field select:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
	gap: 16px;
}

.aifg-portal-switch-field {
	display: flex;
	align-items: center;
	gap: 10px;
	align-self: end;
	padding-block: 10px;
}

.aifg-portal-switch-field > span {
	margin-block-end: 0;
	order: 2;
}

.aifg-portal-switch-field input[type="checkbox"] {
	order: 1;
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	accent-color: var(--aifgp-primary, #1F1B16);
	cursor: pointer;
}

.aifg-portal-form-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 18px;
}

.aifg-portal-form-status {
	font-size: var(--aifgp-size-sm, 14px);
	font-weight: 600;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal-form-status.is-ok { color: var(--aifgp-success, #2F9E68); }
.aifg-portal-form-status.is-error { color: var(--aifgp-danger, #D2493F); }

/* ---- Measurements fieldset ---- */

.aifg-portal-measures {
	margin-block: 18px 4px;
	padding: 16px 18px 6px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
}

.aifg-portal-measures legend {
	padding-inline: 8px;
	font-weight: 600;
}

.aifg-portal-measures-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
	gap: 12px;
	margin-block-end: 12px;
}

/* =====================================================================
 * 10. Profile photo
 * ===================================================================== */

.aifg-portal-avatar-card {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.aifg-portal-avatar-preview {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	inline-size: 92px;
	block-size: 92px;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid var(--aifgp-border, #E8E1D7);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
}

.aifg-portal-avatar-preview img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aifg-portal-avatar-initial {
	font-size: 2em;
	font-weight: 700;
	color: var(--aifgp-accent, #B8905F);
	text-transform: uppercase;
}

.aifg-portal-avatar-actions {
	display: grid;
	gap: 8px;
	min-inline-size: 0;
	flex: 1 1 260px;
}

.aifg-portal-avatar-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.aifg-portal-avatar-upload-btn {
	cursor: pointer;
}

.aifg-portal-avatar-upload-btn.is-busy {
	opacity: .55;
	cursor: not-allowed;
}

/* =====================================================================
 * 11. Addresses
 * ===================================================================== */

.aifg-portal-addr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	gap: 14px;
	margin-block-end: 20px;
}

.aifg-portal-addr-card {
	display: grid;
	gap: 8px;
	align-content: start;
	margin-block-end: 0;
	padding: 18px 20px;
}

.aifg-portal-addr-card p {
	margin: 0;
	color: var(--aifgp-muted, #8A8178);
	line-height: 1.55;
}

.aifg-portal-addr-card.is-leaving {
	opacity: 0;
	transition: opacity .25s ease;
}

.aifg-portal-addr-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.aifg-portal-addr-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: auto;
	padding-block-start: 4px;
}

.aifg-portal-addr-grid--wc .aifg-portal-addr-card--wc p.aifg-portal-empty {
	padding: 8px 0;
	text-align: start;
}

.aifg-portal-addr-form-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 16px;
}

#aifg-portal-addr-form .aifg-portal-subtitle {
	margin-block-end: 16px;
}

#aifg-portal-addr-empty {
	grid-column: 1 / -1;
	text-align: start;
	padding: 18px 0;
}

/*
 * Checkout selector — printed by Module_Addresses into the WooCommerce
 * checkout form, OUTSIDE `.aifg-portal`. Kept deliberately plain so it sits in
 * the theme's own form rather than fighting it; the one prefixed class cannot
 * collide with anything.
 */
.aifg-portal-checkout-addr {
	margin-block-end: 18px;
}

.aifg-portal-checkout-addr select {
	inline-size: 100%;
}

/* =====================================================================
 * 12. Notifications
 * ===================================================================== */

.aifg-portal-bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	border-radius: 50%;
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	transition: border-color .15s ease, transform .15s ease;
}

.aifg-portal-bell:hover,
.aifg-portal-bell:focus-visible {
	border-color: var(--aifgp-accent, #B8905F);
	transform: translateY(-1px);
}

.aifg-portal-bell.has-unread {
	border-color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-bell-badge {
	position: absolute;
	inset-block-start: -4px;
	inset-inline-end: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 18px;
	block-size: 18px;
	padding-inline: 4px;
	border-radius: 9px;
	background: var(--aifgp-danger, #D2493F);
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.aifg-portal-notif-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aifg-portal-notif {
	overflow: hidden;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	transition: border-color .18s ease, background-color .18s ease;
}

.aifg-portal-notif.is-unread {
	border-inline-start: 3px solid var(--aifgp-accent, #B8905F);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	cursor: pointer;
}

.aifg-portal-notif-link {
	display: grid;
	gap: 2px;
	padding: 12px 16px;
	color: inherit;
	text-decoration: none;
}

.aifg-portal-notif-title {
	font-weight: 600;
}

.aifg-portal-notif-body {
	color: var(--aifgp-text-soft, #8A8178);
	font-size: .92em;
}

.aifg-portal-notif-time {
	color: var(--aifgp-text-soft, #8A8178);
	font-size: .8em;
}

/* =====================================================================
 * 13. Search
 * ===================================================================== */

.aifg-portal-search {
	display: grid;
	gap: 14px;
}

.aifg-portal-search-input {
	inline-size: 100%;
	padding: 12px 16px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: 1.05em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aifg-portal-search-input:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal-search-results {
	display: grid;
	gap: 8px;
}

.aifg-portal-search-results:empty {
	display: none;
}

/* Built by aifg-portal.js from the search answer. */
.aifg-portal-search-group {
	margin: 12px 0 4px;
	font-size: 1em;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal-search-group:first-child {
	margin-block-start: 0;
}

.aifg-portal-search-products {
	display: grid;
	gap: 8px;
}

.aifg-portal-search-product {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	min-inline-size: 0;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	transition: border-color .15s ease;
}

.aifg-portal-search-product:hover,
.aifg-portal-search-product:focus-visible {
	border-color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-search-product img {
	flex: 0 0 auto;
	inline-size: 44px;
	block-size: 58px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--aifgp-placeholder, rgba(0, 0, 0, .05));
}

.aifg-portal-search-product span {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.aifg-portal-search-product strong {
	margin-inline-start: auto;
	padding-inline-start: 8px;
	color: var(--aifgp-accent, #B8905F);
	white-space: nowrap;
}

.aifg-portal-search-order {
	padding: 10px 12px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	overflow-wrap: anywhere;
}

/* =====================================================================
 * 14. FAQ
 * ===================================================================== */

.aifg-portal-faq {
	display: grid;
	gap: 10px;
}

.aifg-portal-faq-item {
	padding: 0;
	overflow: hidden;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
}

.aifg-portal-faq-item summary {
	position: relative;
	padding: 15px 18px;
	padding-inline-end: 44px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.aifg-portal-faq-item summary::-webkit-details-marker {
	display: none;
}

.aifg-portal-faq-item summary::after {
	content: '+';
	position: absolute;
	inset-inline-end: 18px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	color: var(--aifgp-accent, #B8905F);
	font-size: 1.2em;
	line-height: 1;
}

.aifg-portal-faq-item[open] summary::after {
	/* U+2013 en dash — a hyphen reads as a stray mark at this size. */
	content: '\2013';
}

.aifg-portal-faq-answer {
	padding: 0 18px 16px;
	color: var(--aifgp-muted, #8A8178);
	line-height: 1.65;
}

.aifg-portal-faq-answer p:last-child {
	margin-block-end: 0;
}

/* =====================================================================
 * 15. Login prompt (signed out)
 * ===================================================================== */

.aifg-portal-login {
	max-inline-size: 440px;
	margin-inline: auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--aifgp-surface, #FFFFFF);
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	box-shadow: var(--aifgp-shadow, 0 8px 24px rgba(20, 15, 10, .07));
}

.aifg-portal-login__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 58px;
	block-size: 58px;
	margin-block-end: 16px;
	border-radius: 50%;
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal-login p {
	margin: 10px 0 22px;
	color: var(--aifgp-muted, #8A8178);
}

/* =====================================================================
 * 16. Inline confirm (replaces window.confirm)
 * ===================================================================== */

.aifg-portal-confirm {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	inline-size: 100%;
	margin-block-start: 10px;
	padding: 12px 14px;
	border: 1px solid var(--aifgp-danger, #D2493F);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-danger-soft, rgba(210, 73, 63, .12));
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal-confirm__text {
	flex: 1 1 160px;
	min-inline-size: 0;
	font-weight: 600;
	color: var(--aifgp-text, #241F19);
}

.aifg-portal-confirm__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.aifg-portal-confirm .aifg-portal-btn--danger {
	background: var(--aifgp-danger, #D2493F);
	border-color: var(--aifgp-danger, #D2493F);
	color: #FFFFFF;
}

/* =====================================================================
 * 17. Wishlist heart — product page
 *
 * Printed by Module_Wishlist into `woocommerce_single_product_summary`,
 * OUTSIDE `.aifg-portal`, so it is the only rule set in this file that is not
 * scoped to the portal wrapper. The token block is scoped too, so every value
 * here falls back to a literal.
 * ===================================================================== */

.aifg-portal-wish-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-start: 12px;
	padding: 10px 18px;
	border: 1px solid var(--aifgp-border, #DDDDDD);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, opacity .18s ease;
}

.aifg-portal-wish-btn:hover,
.aifg-portal-wish-btn.is-active {
	border-color: currentColor;
	color: #C0392B;
}

.aifg-portal-wish-btn[disabled],
.aifg-portal-wish-btn.is-busy {
	opacity: .55;
	cursor: not-allowed;
}

.aifg-portal-wish-btn__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* The label is swapped for the server's own wording when the heart is toggled,
   and Hebrew and English versions of it differ in length: it must not push the
   pill wider than the product summary column. */
.aifg-portal-wish-btn__label {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/* Inside the portal grid the Remove control is a plain ghost button. */
.aifg-portal .aifg-portal-wish-remove {
	margin-block-start: 0;
	border-radius: var(--aifgp-radius-sm, 8px);
}

/* =====================================================================
 * 18. Responsive
 * ===================================================================== */

/*
 * The queries below ask the PORTAL how wide it is, not the window: a theme
 * that hands the shortcode a 540px column inside a 1440px viewport must get
 * the narrow layout, and at 390px the container and the viewport agree anyway.
 * The @supports block at the end repeats the same two breakpoints as viewport
 * queries for engines that predate container queries (Chrome < 105,
 * Safari < 16, Firefox < 110), so those visitors still get one column and
 * cards instead of a squeezed two-column grid.
 */

@container aifgportal (max-width: 900px) {
	.aifg-portal-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.aifg-portal-side {
		position: static;
		padding: 14px 12px;
	}

	.aifg-portal-user {
		padding-block-end: 12px;
	}

	.aifg-portal-user.has-photo {
		flex-direction: row;
		text-align: start;
	}

	.aifg-portal-user.has-photo .aifg-portal-user__photo {
		inline-size: 52px;
		block-size: 52px;
	}

	/* The sidebar becomes a horizontal rail; it scrolls, the page does not. */
	.aifg-portal-nav {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		padding-block-end: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.aifg-portal-nav__item {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	.aifg-portal-nav__badge {
		margin-inline-start: 2px;
	}

	.aifg-portal-nav__item--logout {
		margin: 0;
		padding-block-start: 11px;
		border: none;
	}

	.aifg-portal-form-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

@container aifgportal (max-width: 600px) {
	.aifg-portal-kpis {
		grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
		gap: 12px;
	}

	.aifg-portal-kpi {
		padding: 14px;
		gap: 12px;
	}

	.aifg-portal-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
		gap: 14px;
	}

	.aifg-portal-field-grid,
	.aifg-portal-measures-row {
		grid-template-columns: minmax(0, 1fr);
	}

	.aifg-portal-avatar-card {
		flex-direction: column;
		align-items: flex-start;
	}

	/* ---- Tables become cards ----
	   Every cell carries `data-label`; the cells that do not (the actions
	   column) simply lose the label rather than printing an empty one. */
	.aifg-portal-table-wrap {
		overflow-x: visible;
	}

	.aifg-portal-table thead {
		display: none;
	}

	.aifg-portal-table,
	.aifg-portal-table tbody,
	.aifg-portal-table tr,
	.aifg-portal-table td {
		display: block;
		inline-size: 100%;
	}

	.aifg-portal-table tr {
		margin-block-end: 12px;
		padding: 8px 4px;
		border: 1px solid var(--aifgp-border, #E8E1D7);
		border-radius: var(--aifgp-radius-sm, 8px);
	}

	.aifg-portal-table tbody tr:last-child {
		margin-block-end: 0;
	}

	.aifg-portal-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 12px;
		border: none;
	}

	.aifg-portal-table td[data-label]::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: var(--aifgp-muted, #8A8178);
		font-weight: 600;
		font-size: .85em;
	}

	.aifg-portal-table td:empty {
		display: none;
	}

	.aifg-portal-order-actions {
		justify-content: flex-end;
	}
}

/* The root's own gutter: a container query cannot style its own container, and
   the page margin is a property of the window in any case. */
@media (max-width: 600px) {
	.aifg-portal {
		padding: 16px;
		border-radius: 0;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.aifg-portal-shell {
			grid-template-columns: minmax(0, 1fr);
			gap: 18px;
		}

		.aifg-portal-side {
			position: static;
			padding: 14px 12px;
		}

		.aifg-portal-user {
			padding-block-end: 12px;
		}

		.aifg-portal-user.has-photo {
			flex-direction: row;
			text-align: start;
		}

		.aifg-portal-user.has-photo .aifg-portal-user__photo {
			inline-size: 52px;
			block-size: 52px;
		}

		/* The sidebar becomes a horizontal rail; it scrolls, the page does not. */
		.aifg-portal-nav {
			flex-direction: row;
			gap: 6px;
			overflow-x: auto;
			padding-block-end: 4px;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: thin;
		}

		.aifg-portal-nav__item {
			flex: 0 0 auto;
			white-space: nowrap;
		}

		.aifg-portal-nav__badge {
			margin-inline-start: 2px;
		}

		.aifg-portal-nav__item--logout {
			margin: 0;
			padding-block-start: 11px;
			border: none;
		}

		.aifg-portal-form-row {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	@media (max-width: 600px) {
		.aifg-portal-kpis {
			grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
			gap: 12px;
		}

		.aifg-portal-kpi {
			padding: 14px;
			gap: 12px;
		}

		.aifg-portal-grid {
			grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
			gap: 14px;
		}

		.aifg-portal-field-grid,
		.aifg-portal-measures-row {
			grid-template-columns: minmax(0, 1fr);
		}

		.aifg-portal-avatar-card {
			flex-direction: column;
			align-items: flex-start;
		}

		/* ---- Tables become cards ----
		   Every cell carries `data-label`; the cells that do not (the actions
		   column) simply lose the label rather than printing an empty one. */
		.aifg-portal-table-wrap {
			overflow-x: visible;
		}

		.aifg-portal-table thead {
			display: none;
		}

		.aifg-portal-table,
		.aifg-portal-table tbody,
		.aifg-portal-table tr,
		.aifg-portal-table td {
			display: block;
			inline-size: 100%;
		}

		.aifg-portal-table tr {
			margin-block-end: 12px;
			padding: 8px 4px;
			border: 1px solid var(--aifgp-border, #E8E1D7);
			border-radius: var(--aifgp-radius-sm, 8px);
		}

		.aifg-portal-table tbody tr:last-child {
			margin-block-end: 0;
		}

		.aifg-portal-table td {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			padding: 8px 12px;
			border: none;
		}

		.aifg-portal-table td[data-label]::before {
			content: attr(data-label);
			flex: 0 0 auto;
			color: var(--aifgp-muted, #8A8178);
			font-weight: 600;
			font-size: .85em;
		}

		.aifg-portal-table td:empty {
			display: none;
		}

		.aifg-portal-order-actions {
			justify-content: flex-end;
		}
	}
}

/* =====================================================================
 * 19. Motion
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.aifg-portal *,
	.aifg-portal *::before,
	.aifg-portal *::after,
	.aifg-portal-wish-btn {
		/* Overriding a transition the rules above set unconditionally is the
		   one thing this query can do; nothing else in the file is animated. */
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.aifg-portal-product:hover,
	.aifg-portal-quicklink:hover,
	a.aifg-portal-kpi:hover,
	.aifg-portal-bell:hover,
	.aifg-portal-btn:active {
		transform: none;
	}
}

/* =====================================================================
 * 20. Dark mode
 *
 * The palette belongs to the shop, not to the operating system: nothing here
 * touches a token. The only two values redefined are the ones the tokens do
 * not express, and both are derived from the shop's own `--aifgp-text` and
 * `--aifgp-surface` — so on a light-token shop they resolve to exactly the
 * light values they already had, and only a shop that chose a dark palette
 * sees a difference.
 * ===================================================================== */

@media (prefers-color-scheme: dark) {
	.aifg-portal {
		--aifgp-placeholder: color-mix(in srgb, var(--aifgp-text, #241F19) 12%, var(--aifgp-surface, #FFFFFF));
		--aifgp-ring: 0 0 0 1px color-mix(in srgb, var(--aifgp-text, #241F19) 14%, transparent);
	}

	/* A dark surface swallows a drop shadow; a hairline ring keeps the card
	   edge visible. Derived from the tokens, so a light shop keeps its own. */
	.aifg-portal-card,
	.aifg-portal-kpi,
	.aifg-portal-product,
	.aifg-portal-side {
		box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05)), var(--aifgp-ring);
	}
}

/* ===== Narrow-container navigation: wrap instead of scroll ================
   In a theme column of ~540px the horizontal rail put four of the ten tabs
   off-screen behind a scrollbar a customer does not notice. The rail now
   wraps: every tab stays visible and reachable, at the cost of a second row.
   Declared after the container blocks above so it wins in both engines. == */
@container aifgportal (max-width: 900px) {
	.aifg-portal-nav {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 6px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.aifg-portal-nav {
			flex-wrap: wrap;
			overflow-x: visible;
			row-gap: 6px;
		}
	}
}

/* ===== Phone navigation: the rail comes back ==============================
   Wrapping was written for a ~540px theme column holding ten tabs, where it
   cost one extra row. The build ships twenty-three, and in the ~298px a phone
   actually gives the content they wrap into fifteen to seventeen rows: the
   navigation alone measured 854px tall and pushed the first line of content
   to 1389px — nearly two screens below the fold, on every tab.

   So below 480px it is a rail again. The objection that answered on a desktop
   column — a scrollbar a customer does not notice — does not hold on a phone,
   where swiping is the normal gesture and the cut-off last item is the
   affordance. No fade gradient: a gradient needs a physical direction and
   would have to be mirrored by hand for RTL, while a half-visible item reads
   the same in both. The script already brings the active tab into view when
   the rail scrolls, which until now was unreachable code. ================ */
@container aifgportal (max-width: 480px) {
	.aifg-portal-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		row-gap: 0;
		scroll-snap-type: inline proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.aifg-portal-nav::-webkit-scrollbar {
		block-size: 0;
		inline-size: 0;
	}

	.aifg-portal-nav__item {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.aifg-portal-nav {
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			row-gap: 0;
			scroll-snap-type: inline proximity;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
		}

		.aifg-portal-nav::-webkit-scrollbar {
			block-size: 0;
			inline-size: 0;
		}

		.aifg-portal-nav__item {
			flex: 0 0 auto;
			scroll-snap-align: start;
		}
	}
}

/* ===== Full frame ========================================================
   A theme hands a shortcode its content column — 540px inside a 1440px
   window on a block theme — and the portal then reads as a narrow card
   dropped on the page's own background. Full-frame mode opts out of that
   column the way WordPress itself does, with `alignfull` on the wrapper
   (the constrained-layout rule that caps the width is written as
   `:not(.alignfull)`, so the class is the documented escape and outranks
   nothing — no specificity war, no viewport maths that would fight the
   scrollbar). The portal then carries its own background edge to edge and
   keeps its content on a readable measure inside.
   A theme that ignores `alignfull` simply gets a portal that fills its
   container, which is what it did before — never an overflow.
   ====================================================================== */
.aifg-portal--full {
	max-inline-size: none;
	border-radius: 0;
	box-sizing: border-box;
	padding-block: clamp(20px, 3vw, 48px);
	padding-inline: clamp(16px, 4vw, 56px);
}

/* The content stays readable: a comfortable measure, centred, like the
   studio's own screens. */
.aifg-portal--full > * {
	max-inline-size: min(1440px, 94%);
	margin-inline: auto;
}

@media (max-width: 782px) {
	.aifg-portal--full > * {
		max-inline-size: 100%;
	}
}

/* =====================================================================
 * Loyalty and VIP card (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. Same house rules as the rest of
 * that file: every selector starts at `.aifg-portal`, every colour, radius
 * and size comes from an `--aifgp-*` custom property with the same literal
 * fallback the stylesheet uses, and the box model is written in logical
 * properties because the shop runs right to left.
 *
 * The seller's scan screen is deliberately absent: it lives in wp-admin,
 * where this stylesheet is not loaded, and it is drawn with WordPress's own
 * notice and card classes instead.
 * ===================================================================== */

/* ---- The club card ------------------------------------------------- */

.aifg-portal .aifg-portal-loyalty-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.aifg-portal .aifg-portal-loyalty-head .aifg-portal-subtitle {
	margin: 0;
}

.aifg-portal .aifg-portal-loyalty-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: clamp(18px, 3vw, 28px);
	margin-block: 16px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	background:
		linear-gradient(
			135deg,
			var(--aifgp-accent-soft, #F3EDE4) 0%,
			var(--aifgp-surface, #FFFFFF) 100%
		);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
}

.aifg-portal .aifg-portal-loyalty-card__brand {
	font-size: var(--aifgp-size-sm, 14px);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-loyalty-card__name {
	font-family: var(--aifgp-font-heading, inherit);
	font-weight: var(--aifgp-heading-weight, 600);
	font-size: var(--aifgp-size-h3, 20px);
	color: var(--aifgp-text, #241F19);
}

.aifg-portal .aifg-portal-loyalty-card__num {
	font-variant-numeric: tabular-nums;
	letter-spacing: .18em;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-loyalty-card__group {
	align-self: flex-start;
}

.aifg-portal .aifg-portal-loyalty-card__status {
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-muted, #8A8178);
}

/* `.aifg-portal-loyalty-kpi-text` used to sit here, for a KPI whose value was
   a few words rather than a number. It styled the "account status" tile, which
   was fed by a response node the card service does not send; the tile is gone
   and so is the rule. The club's own remark about an account now sits on the
   card itself, as `.aifg-portal-loyalty-card__status`. */

.aifg-portal .aifg-portal-loyalty-upsale {
	border-inline-start: 3px solid var(--aifgp-accent, #C9A227);
}

.aifg-portal .aifg-portal-loyalty-benefits {
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.aifg-portal .aifg-portal-loyalty-benefits li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding-block: 10px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-loyalty-benefits li:first-child {
	border-block-start: none;
	padding-block-start: 0;
}

.aifg-portal .aifg-portal-loyalty-benefits span {
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-loyalty-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

/* `.aifg-portal-link` was written for anchors; unlinking is an action, so it
   is a button, and a button needs the native chrome taken off before it can
   wear that class. New selector, so the anchor styling above is untouched. */
.aifg-portal button.aifg-portal-link {
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
	background: none;
	border: none;
	border-block-end: 1px solid transparent;
	font: inherit;
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-primary, #1F1B16);
	cursor: pointer;
}

/* ---- The club's own ladder ------------------------------------------
   Drawn only when the service sent both the steps and where the customer
   stands on them, so every number below is one the club published. */

.aifg-portal .aifg-portal-loyalty-tiers__now {
	margin: 0 0 12px;
	font-family: var(--aifgp-font-heading, inherit);
	font-weight: var(--aifgp-heading-weight, 600);
	font-size: var(--aifgp-size-h2, 24px);
	font-variant-numeric: tabular-nums;
	color: var(--aifgp-text, #241F19);
}

.aifg-portal .aifg-portal-loyalty-tiers__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
	gap: 8px;
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.aifg-portal .aifg-portal-loyalty-tiers__step {
	display: grid;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-bg, #FBF8F4);
}

/* The step she has reached: the club's own threshold, met. */
.aifg-portal .aifg-portal-loyalty-tiers__step.is-reached {
	border-color: var(--aifgp-accent, #C9A227);
	background: var(--aifgp-accent-soft, #F3EDE4);
}

.aifg-portal .aifg-portal-loyalty-tiers__name {
	font-weight: 600;
	color: var(--aifgp-text, #241F19);
}

.aifg-portal .aifg-portal-loyalty-tiers__amount {
	font-size: var(--aifgp-size-sm, 14px);
	font-variant-numeric: tabular-nums;
	color: var(--aifgp-muted, #8A8178);
}

/* ---- Punch cards ----------------------------------------------------- */

.aifg-portal .aifg-portal-loyalty-punch__card + .aifg-portal-loyalty-punch__card {
	margin-block-start: 18px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-loyalty-punch__name {
	margin: 0;
	font-family: var(--aifgp-font-heading, inherit);
	font-weight: var(--aifgp-heading-weight, 600);
	font-size: var(--aifgp-size-base, 16px);
	color: var(--aifgp-text, #241F19);
}

.aifg-portal .aifg-portal-loyalty-punch__count {
	margin: 2px 0 10px;
	font-size: var(--aifgp-size-sm, 14px);
	font-variant-numeric: tabular-nums;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-loyalty-punch__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

.aifg-portal .aifg-portal-loyalty-punch__dot {
	inline-size: 30px;
	block-size: 30px;
	display: grid;
	place-items: center;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: 50%;
	font-size: var(--aifgp-size-sm, 14px);
	font-variant-numeric: tabular-nums;
	color: var(--aifgp-placeholder, #B3AAA0);
}

.aifg-portal .aifg-portal-loyalty-punch__dot.is-punched {
	border-color: var(--aifgp-accent, #C9A227);
	background: var(--aifgp-accent, #C9A227);
	color: var(--aifgp-surface, #FFFFFF);
}

/* ---- Membership dates ------------------------------------------------ */

.aifg-portal .aifg-portal-loyalty-facts {
	display: grid;
	gap: 0;
	margin: 0;
}

.aifg-portal .aifg-portal-loyalty-facts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	padding-block: 10px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-loyalty-facts__row:first-child {
	border-block-start: none;
	padding-block-start: 0;
}

.aifg-portal .aifg-portal-loyalty-facts dt {
	margin: 0;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal .aifg-portal-loyalty-facts dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--aifgp-text, #241F19);
}

/* ---- Recent activity -------------------------------------------------
   The table is printed empty and hidden until the customer asks for the
   history, because fetching it is a second call to the card service. */

.aifg-portal .aifg-portal-loyalty-activity__ask {
	margin-block: 0;
}

/* The ask is a link, because it has to work without JavaScript, and a ghost
   button's colour was only ever written for a <button>. A theme's
   `.entry-content a` rule matches this one on specificity and can load after
   the portal's stylesheet, which is the one case the file allows `!important`
   for — the same reason it is already used on `a.aifg-portal-btn--primary`. */
.aifg-portal a.aifg-portal-btn--ghost,
.aifg-portal a.aifg-portal-btn--ghost:visited {
	color: var(--aifgp-text, #241F19) !important;
}

.aifg-portal a.aifg-portal-btn--ghost:hover,
.aifg-portal a.aifg-portal-btn--ghost:focus {
	color: var(--aifgp-primary, #1F1B16) !important;
}

.aifg-portal .aifg-portal-loyalty-activity .aifg-portal-table-wrap[hidden] {
	display: none;
}

.aifg-portal .aifg-portal-loyalty-activity .aifg-portal-form-status:empty {
	display: none;
}

/* ---- Linking and enrolment ----------------------------------------- */

.aifg-portal .aifg-portal-loyalty-step {
	display: grid;
	gap: 12px;
	justify-items: start;
}

.aifg-portal .aifg-portal-loyalty-step .aifg-portal-field {
	inline-size: 100%;
	max-inline-size: 320px;
}

.aifg-portal .aifg-portal-loyalty-check {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.5;
	cursor: pointer;
}

.aifg-portal .aifg-portal-loyalty-check input {
	margin-block-start: .25em;
	flex: 0 0 auto;
}

/* ---- The member card ------------------------------------------------ */

.aifg-portal .aifg-portal-vip {
	display: grid;
	gap: 18px;
	justify-items: center;
	text-align: center;
}

.aifg-portal .aifg-portal-vip__top {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: start;
}

.aifg-portal .aifg-portal-vip__photo {
	flex: 0 0 auto;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--aifgp-accent-soft, #F3EDE4);
}

.aifg-portal .aifg-portal-vip__photo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.aifg-portal .aifg-portal-vip__identity {
	display: grid;
	gap: 4px;
	justify-items: start;
}

.aifg-portal .aifg-portal-vip__brand {
	font-size: var(--aifgp-size-sm, 14px);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-vip__name {
	font-family: var(--aifgp-font-heading, inherit);
	font-weight: var(--aifgp-heading-weight, 600);
	font-size: var(--aifgp-size-h3, 20px);
}

.aifg-portal .aifg-portal-vip__code {
	display: grid;
	gap: 12px;
	justify-items: center;
}

/* Whatever the shop's code library draws goes in here: it is given a square
   box that never outgrows a narrow phone. */
.aifg-portal .aifg-portal-vip__qr {
	inline-size: min(220px, 100%);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	padding: 10px;
	border-radius: var(--aifgp-radius-sm, 8px);
	background: #FFFFFF;
}

.aifg-portal .aifg-portal-vip__qr canvas,
.aifg-portal .aifg-portal-vip__qr img,
.aifg-portal .aifg-portal-vip__qr svg {
	inline-size: 100%;
	block-size: auto;
	max-inline-size: 100%;
}

.aifg-portal .aifg-portal-vip__note {
	margin: 0;
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-muted, #8A8178);
}

/* ---- Narrow screens ------------------------------------------------- */

@container aifgportal (max-width: 560px) {
	.aifg-portal .aifg-portal-loyalty-head {
		align-items: flex-start;
	}

	.aifg-portal .aifg-portal-vip__top {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.aifg-portal .aifg-portal-vip__identity {
		justify-items: center;
	}

	.aifg-portal .aifg-portal-loyalty-step .aifg-portal-field {
		max-inline-size: none;
	}

	/* One step per line rather than two squeezed ones. */
	.aifg-portal .aifg-portal-loyalty-tiers__steps {
		grid-template-columns: 1fr;
	}

	.aifg-portal .aifg-portal-loyalty-tiers__step {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
	}

	.aifg-portal .aifg-portal-loyalty-punch__dot {
		inline-size: 26px;
		block-size: 26px;
	}
}

/* The same rules for an engine without container queries, mirroring the
   fallback pattern the stylesheet already uses. */
@supports not (container-type: inline-size) {
	@media (max-width: 560px) {
		.aifg-portal .aifg-portal-loyalty-head {
			align-items: flex-start;
		}

		.aifg-portal .aifg-portal-vip__top {
			flex-direction: column;
			align-items: center;
			text-align: center;
		}

		.aifg-portal .aifg-portal-vip__identity {
			justify-items: center;
		}

		.aifg-portal .aifg-portal-loyalty-step .aifg-portal-field {
			max-inline-size: none;
		}

		.aifg-portal .aifg-portal-loyalty-tiers__steps {
			grid-template-columns: 1fr;
		}

		.aifg-portal .aifg-portal-loyalty-tiers__step {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: 12px;
		}

		.aifg-portal .aifg-portal-loyalty-punch__dot {
			inline-size: 26px;
			block-size: 26px;
		}
	}
}

/* =====================================================================
 * Returns and after-sales (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. Same house rules as the rest of
 * that file: every selector starts at `.aifg-portal`, every colour, radius,
 * size and font comes from an `--aifgp-*` custom property with the same
 * literal fallback the stylesheet already uses, and the box model is written
 * in logical properties because the shop runs right to left.
 *
 * The shop's own queue is deliberately absent: it lives in wp-admin, where
 * this stylesheet is not loaded, and it is drawn with WordPress's own
 * `widefat`, `card` and `subsubsub` classes instead.
 *
 * There is no `!important` anywhere below.
 * ===================================================================== */

/* ---- Status badges -------------------------------------------------
   The shared sheet ships `--info` only. The other three tones of the
   workflow are defined here, against the same tokens its own badges use. */

.aifg-portal .aifg-portal-returns-badge--warn {
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal .aifg-portal-returns-badge--info {
	background: var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
	color: var(--aifgp-primary, #1F1B16);
}

.aifg-portal .aifg-portal-returns-badge--ok {
	background: var(--aifgp-success-soft, rgba(47, 158, 104, .13));
	color: var(--aifgp-success, #2F9E68);
}

.aifg-portal .aifg-portal-returns-badge--err {
	background: var(--aifgp-danger-soft, rgba(210, 73, 63, .12));
	color: var(--aifgp-danger, #D2493F);
}

/* ---- The "open a request" card ------------------------------------- */

.aifg-portal .aifg-portal-returns-new {
	margin-block-end: 24px;
}

.aifg-portal .aifg-portal-returns-new__summary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-primary, #1F1B16);
	color: var(--aifgp-surface, #FFFFFF);
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari still draws the disclosure triangle through this pseudo-element. */
.aifg-portal .aifg-portal-returns-new__summary::-webkit-details-marker {
	display: none;
}

.aifg-portal .aifg-portal-returns-new__summary::marker {
	content: "";
}

.aifg-portal .aifg-portal-returns-new[open] .aifg-portal-returns-new__summary {
	margin-block-end: 20px;
}

/* ---- The form ------------------------------------------------------ */

.aifg-portal .aifg-portal-returns-form .aifg-portal-field {
	margin-block-end: 16px;
}

/* The shared sheet styles inputs and selects; a textarea and a file input
   only appear in this tab, so they are dressed to match here. */
.aifg-portal .aifg-portal-returns-form textarea {
	inline-size: 100%;
	padding: 12px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.5;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aifg-portal .aifg-portal-returns-form textarea:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal .aifg-portal-returns-form input[type="file"] {
	inline-size: 100%;
	padding: 10px 12px;
	border: 1px dashed var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-bg, #FAF7F2);
	color: var(--aifgp-muted, #8A8178);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-sm, 14px);
}

/* ---- Choosing the items -------------------------------------------- */

.aifg-portal .aifg-portal-returns-items {
	display: grid;
	gap: 12px;
	margin-block-end: 16px;
}

.aifg-portal .aifg-portal-returns-itemset {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	min-inline-size: 0;
}

.aifg-portal .aifg-portal-returns-itemset > legend {
	padding-inline: 6px;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
	font-weight: 600;
}

.aifg-portal .aifg-portal-returns-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding-block: 7px;
	line-height: 1.45;
	cursor: pointer;
}

.aifg-portal .aifg-portal-returns-choice input[type="checkbox"] {
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: 2px;
	flex: 0 0 auto;
	accent-color: var(--aifgp-primary, #1F1B16);
	cursor: pointer;
}

/* ---- The list of requests ------------------------------------------ */

.aifg-portal .aifg-portal-returns-list {
	display: grid;
	gap: 12px;
}

.aifg-portal .aifg-portal-returns-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px 16px;
	padding: 16px 18px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	background: var(--aifgp-surface, #FFFFFF);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
	transition: border-color .15s ease, transform .15s ease;
}

.aifg-portal .aifg-portal-returns-item:hover,
.aifg-portal .aifg-portal-returns-item:focus-visible {
	border-color: var(--aifgp-primary, #1F1B16);
}

.aifg-portal .aifg-portal-returns-item__id {
	font-family: var(--aifgp-font-heading, inherit);
	font-weight: var(--aifgp-heading-weight, 600);
	font-variant-numeric: tabular-nums;
}

.aifg-portal .aifg-portal-returns-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	min-inline-size: 0;
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal .aifg-portal-returns-item__reason {
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-returns-item__date {
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
	white-space: nowrap;
}

/* ---- One request --------------------------------------------------- */

.aifg-portal .aifg-portal-returns-back {
	margin-block-end: 10px;
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal .aifg-portal-returns-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.aifg-portal .aifg-portal-returns-summary {
	margin-block-end: 24px;
}

.aifg-portal .aifg-portal-returns-itemlist {
	margin: 10px 0 0;
	padding-inline-start: 20px;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
}

/* ---- The thread ----------------------------------------------------- */

.aifg-portal .aifg-portal-returns-thread {
	display: grid;
	gap: 14px;
	margin-block: 16px 24px;
}

.aifg-portal .aifg-portal-returns-msg {
	max-inline-size: 42rem;
	padding: 14px 16px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	background: var(--aifgp-surface, #FFFFFF);
}

/* The customer's own messages sit on the starting edge and carry the
   accent; the boutique's answers sit on the ending edge. Both are written
   with logical properties, so the pair mirrors itself in Hebrew. */
.aifg-portal .aifg-portal-returns-msg.is-mine {
	margin-inline-end: auto;
	border-color: var(--aifgp-accent, #B8905F);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
}

.aifg-portal .aifg-portal-returns-msg.is-shop {
	margin-inline-start: auto;
}

.aifg-portal .aifg-portal-returns-msg__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-block-end: 6px;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
	font-weight: 600;
}

.aifg-portal .aifg-portal-returns-msg__body {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-returns-msg__photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 10px;
}

.aifg-portal .aifg-portal-returns-msg__photos img {
	inline-size: 88px;
	block-size: 88px;
	object-fit: cover;
	border-radius: var(--aifgp-radius-sm, 8px);
	border: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-returns-reply {
	margin-block-start: 8px;
}

/* ---- Narrow columns and phones (390px is the target) -----------------
   The portal is a container query context, so the stacking is driven by the
   width the theme actually gave the shortcode, not by the window. The media
   query below is the fallback for engines without container queries, in the
   same shape the shared sheet already uses. */

@container aifgportal (max-width: 600px) {
	.aifg-portal .aifg-portal-returns-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 6px;
	}

	.aifg-portal .aifg-portal-returns-item > .aifg-portal-badge {
		justify-self: start;
	}

	.aifg-portal .aifg-portal-returns-msg {
		max-inline-size: 100%;
	}

	.aifg-portal .aifg-portal-returns-new__summary {
		inline-size: 100%;
		justify-content: center;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.aifg-portal .aifg-portal-returns-item {
			grid-template-columns: minmax(0, 1fr);
			gap: 6px;
		}

		.aifg-portal .aifg-portal-returns-item > .aifg-portal-badge {
			justify-self: start;
		}

		.aifg-portal .aifg-portal-returns-msg {
			max-inline-size: 100%;
		}

		.aifg-portal .aifg-portal-returns-new__summary {
			inline-size: 100%;
			justify-content: center;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.aifg-portal .aifg-portal-returns-item {
		transition: none;
	}
}

/* =====================================================================
 * Messaging (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. Same house rules as the rest of
 * that file: every selector starts at `.aifg-portal`, every colour, radius,
 * size and font comes from an `--aifgp-*` custom property with the same
 * literal fallback the stylesheet already uses, and the box model is written
 * in logical properties because the shop runs right to left — a bubble from
 * the shop sits at the start of the line and the customer's at the end,
 * whichever way the page flows.
 *
 * The shop's own inbox is deliberately absent: it lives in wp-admin, where
 * this stylesheet is not loaded, and it is drawn with WordPress's own
 * `widefat` and `card` classes instead.
 *
 * The appointments tab that ships alongside this one needs no rules: it is
 * built entirely from the blocks the shared sheet already provides.
 *
 * There is no `!important` anywhere below.
 * ===================================================================== */

/* ---- The card holding the conversation ----------------------------- */

.aifg-portal .aifg-portal-messaging {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The error a no-script submission left behind. */

.aifg-portal .aifg-portal-messaging-error {
	margin: 0 0 16px;
	padding: 11px 16px;
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-danger-soft, rgba(210, 73, 63, .12));
	color: var(--aifgp-danger, #D2493F);
	font-size: var(--aifgp-size-sm, 14px);
}

/* ---- The thread ----------------------------------------------------
   It grows with its content: no max-height and no inner scrollbar, so a
   long conversation scrolls with the page like everything else here. */

.aifg-portal .aifg-portal-messaging-thread {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aifg-portal .aifg-portal-messaging-thread .aifg-portal-empty {
	margin: 0;
}

/* ---- One bubble ----------------------------------------------------- */

.aifg-portal .aifg-portal-messaging-bubble {
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-inline-size: 78%;
	padding: 10px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	background: var(--aifgp-bg, #FAF7F2);
	box-shadow: var(--aifgp-shadow-sm, 0 1px 2px rgba(20, 15, 10, .05));
}

/* The shop speaks from the start of the line… */

.aifg-portal .aifg-portal-messaging-bubble.is-shop {
	align-self: flex-start;
	border-start-start-radius: var(--aifgp-radius-sm, 8px);
}

/* …and the customer from the end of it, in the accent tint. */

.aifg-portal .aifg-portal-messaging-bubble.is-customer {
	align-self: flex-end;
	border-color: transparent;
	border-start-end-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
}

.aifg-portal .aifg-portal-messaging-text {
	margin: 0;
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-messaging-time {
	align-self: flex-end;
	color: var(--aifgp-muted, #8A8178);
	font-size: var(--aifgp-size-sm, 14px);
}

/* ---- The composer --------------------------------------------------- */

.aifg-portal .aifg-portal-messaging-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-messaging-label {
	color: var(--aifgp-muted, #8A8178);
	font-family: var(--aifgp-font-heading, var(--aifgp-font, system-ui, sans-serif));
	font-size: var(--aifgp-size-sm, 14px);
	font-weight: var(--aifgp-heading-weight, 600);
}

.aifg-portal .aifg-portal-messaging-form textarea {
	inline-size: 100%;
	min-block-size: 76px;
	padding: 11px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.5;
	resize: vertical;
}

/* Same focus treatment the shared sheet gives an input or a select. */

.aifg-portal .aifg-portal-messaging-form textarea:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal .aifg-portal-messaging-form textarea::placeholder {
	color: var(--aifgp-muted, #8A8178);
	opacity: 1;
}

/* ---- Narrow screens -------------------------------------------------
   At 390px a 78% bubble leaves a ragged column, so it takes the width it
   needs and only the alignment keeps the two voices apart. */

@media (max-width: 480px) {

	.aifg-portal .aifg-portal-messaging-bubble {
		max-inline-size: 92%;
	}

	.aifg-portal .aifg-portal-messaging-form textarea {
		min-block-size: 92px;
	}
}

/* =====================================================================
 * Refer a friend (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. House rules of that file apply:
 * every selector starts at `.aifg-portal`, every colour, radius and size is
 * an `--aifgp-*` custom property carrying the same literal fallback the
 * stylesheet already uses, and the box model is written in logical
 * properties because the shop reads right to left.
 *
 * Only this tab needed new rules. The coupon tab and the alert tab are built
 * from blocks that already exist (card, KPI, table, badge, empty state), so
 * they add nothing here.
 * ===================================================================== */

.aifg-portal .aifg-portal-referral-code {
	margin: 4px 0 18px;
	padding: clamp(14px, 3vw, 22px);
	border: 1px dashed var(--aifgp-accent, #B8905F);
	border-radius: var(--aifgp-radius, 14px);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-primary, #1F1B16);
	font-family: var(--aifgp-font-heading, var(--aifgp-font, system-ui, sans-serif));
	font-weight: 700;
	/* clamp rather than a fixed size: a six-character code has to stay on one
	   line at 390px without shrinking to nothing on a desktop. */
	font-size: clamp(24px, 7vw, 38px);
	letter-spacing: .22em;
	/* The letter-spacing is applied after the last glyph too, which pushes a
	   centred code visibly off centre. */
	text-indent: .22em;
	text-align: center;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-referral-link {
	inline-size: 100%;
	max-inline-size: 100%;
	font-size: var(--aifgp-size-sm, 14px);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-referral-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 16px;
}

.aifg-portal .aifg-portal-referral-actions .aifg-portal-btn {
	/* Two buttons per row at 390px rather than one very wide one. */
	flex: 1 1 auto;
	min-inline-size: 0;
	justify-content: center;
}

.aifg-portal .aifg-portal-referral-status:empty {
	display: none;
}

.aifg-portal .aifg-portal-referral-steps {
	margin: 0 0 14px;
	padding-inline-start: 1.3em;
	color: var(--aifgp-text, #241F19);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.7;
}

.aifg-portal .aifg-portal-referral-steps li + li {
	margin-block-start: 6px;
}

.aifg-portal .aifg-portal-referral-steps li::marker {
	color: var(--aifgp-accent, #B8905F);
	font-weight: 700;
}

/* =====================================================================
 * Reviews and the AI stylist (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. Same house rules as the rest of
 * that file: every colour, radius, size and font comes from an `--aifgp-*`
 * custom property carrying the same literal fallback the stylesheet already
 * uses, and the box model is written in logical properties because the shop
 * runs right to left.
 *
 * Two modules share this fragment because they share one review of the
 * design: the pieces a customer bought and the pieces a stylist suggests are
 * the same card, the same stars and the same grid.
 *
 * SCOPE — one deliberate exception, the third in this stylesheet. Section 1
 * below styles the photographs a customer attached to a review, and those are
 * printed by WordPress inside the product page's comment list, outside
 * `.aifg-portal`. They carry an `aifg-portal-review-` class that cannot
 * collide with anything, exactly like the wishlist heart and the checkout
 * address selector the shared sheet already excepts. Everything from section
 * 2 onwards is scoped under `.aifg-portal` as usual.
 *
 * There is no `!important` anywhere below.
 * ===================================================================== */

/* =====================================================================
 * 1. Review photographs on the product page (outside .aifg-portal)
 * ===================================================================== */

.aifg-portal-review-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}

.aifg-portal-review-photo {
	display: block;
	border-radius: var(--aifgp-radius-sm, 8px);
	overflow: hidden;
	line-height: 0;
}

.aifg-portal-review-photo img {
	display: block;
	inline-size: 76px;
	block-size: 76px;
	object-fit: cover;
}

/* The file input the module injects into WooCommerce's own review form. It
   only claims spacing: the theme owns everything else on that page. */
.aifg-portal-review-upload {
	margin-block: 12px;
}

.aifg-portal-review-upload label {
	display: block;
	margin-block-end: 6px;
	font-weight: 600;
}

/* =====================================================================
 * 2. The reviews tab
 * ===================================================================== */

.aifg-portal .aifg-portal-reviews-pending,
.aifg-portal .aifg-portal-reviews-mine {
	margin-block-end: 24px;
}

.aifg-portal .aifg-portal-reviews-list {
	display: grid;
	gap: 24px;
}

.aifg-portal .aifg-portal-reviews-item {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr);
	gap: 18px;
	align-items: start;
}

.aifg-portal .aifg-portal-reviews-item + .aifg-portal-reviews-item {
	padding-block-start: 24px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-reviews-item__media {
	min-inline-size: 0;
	border-radius: var(--aifgp-radius-sm, 8px);
	overflow: hidden;
	background: var(--aifgp-placeholder, rgba(0, 0, 0, .05));
}

.aifg-portal .aifg-portal-reviews-item__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.aifg-portal .aifg-portal-reviews-item__body {
	min-inline-size: 0;
}

.aifg-portal .aifg-portal-reviews-item__title {
	display: block;
	margin-block-end: 8px;
	font-family: var(--aifgp-font-heading, var(--aifgp-font, system-ui, sans-serif));
	font-weight: var(--aifgp-heading-weight, 600);
	font-size: var(--aifgp-size-h3, 18px);
	color: var(--aifgp-text, #241F19);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.aifg-portal a.aifg-portal-reviews-item__title:hover,
.aifg-portal a.aifg-portal-reviews-item__title:focus-visible {
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal .aifg-portal-reviews-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block: 0 10px;
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-reviews-item__text {
	margin: 0;
	color: var(--aifgp-text, #241F19);
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-reviews-item.is-done {
	opacity: .75;
}

/* ---- The written score -------------------------------------------- */

.aifg-portal .aifg-portal-reviews-score {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--aifgp-accent, #B8905F);
	line-height: 0;
}

.aifg-portal .aifg-portal-reviews-score svg {
	inline-size: 16px;
	block-size: 16px;
}

/* =====================================================================
 * 3. The star rating control
 *
 * No script: the radios are drawn from five down to one and the row is laid
 * out in reverse, so `:checked ~ label` reaches exactly the stars below the
 * chosen one. `row-reverse` follows the writing direction, so the row still
 * fills from the start edge in Hebrew.
 * ===================================================================== */

.aifg-portal .aifg-portal-reviews-stars {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.aifg-portal .aifg-portal-reviews-stars legend {
	padding: 0;
	margin-block-end: 6px;
	font-weight: 600;
	font-size: var(--aifgp-size-sm, 14px);
}

.aifg-portal .aifg-portal-reviews-stars__row {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
	/* Five 48px touch targets need 248px, and a theme column can be narrower
	   than that. The targets are not negotiable — they are the whole point of
	   the phone block — so the row is allowed to break instead of spilling out
	   of the portal. It never breaks at any width a phone actually gives. */
	flex-wrap: wrap;
}

/* Visually hidden, still focusable and still submitted. */
.aifg-portal .aifg-portal-reviews-stars input[type="radio"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.aifg-portal .aifg-portal-reviews-stars label {
	display: inline-flex;
	padding: 2px;
	border-radius: var(--aifgp-radius-sm, 8px);
	color: var(--aifgp-border, #E8E1D7);
	line-height: 0;
	cursor: pointer;
	transition: color .12s ease;
}

.aifg-portal .aifg-portal-reviews-stars__glyph svg {
	inline-size: 26px;
	block-size: 26px;
}

.aifg-portal .aifg-portal-reviews-stars input[type="radio"]:checked ~ label {
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal .aifg-portal-reviews-stars input[type="radio"]:checked ~ label svg {
	fill: currentColor;
}

.aifg-portal .aifg-portal-reviews-stars label:hover,
.aifg-portal .aifg-portal-reviews-stars label:hover ~ label {
	color: var(--aifgp-accent, #B8905F);
}

.aifg-portal .aifg-portal-reviews-stars input[type="radio"]:focus-visible + label {
	outline: 2px solid var(--aifgp-primary, #1F1B16);
	outline-offset: 2px;
}

/* =====================================================================
 * 4. The review form
 * ===================================================================== */

.aifg-portal .aifg-portal-reviews-form {
	margin-block-start: 12px;
}

.aifg-portal .aifg-portal-reviews-form .aifg-portal-field {
	margin-block-end: 14px;
}

/* The shared sheet dresses inputs and selects; a textarea and a file input
   appear only in this tab and the stylist, so both are dressed here. */
.aifg-portal .aifg-portal-reviews-form textarea,
.aifg-portal .aifg-portal-stylist-form textarea {
	inline-size: 100%;
	padding: 12px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.5;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aifg-portal .aifg-portal-reviews-form textarea:focus,
.aifg-portal .aifg-portal-stylist-form textarea:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

.aifg-portal .aifg-portal-reviews-form input[type="file"] {
	inline-size: 100%;
	max-inline-size: 100%;
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-reviews-form .aifg-portal-hint {
	margin-block: 6px 0;
}

.aifg-portal .aifg-portal-reviews-form .aifg-portal-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-block-start: 4px;
}

/* =====================================================================
 * 5. The stylist tab
 * ===================================================================== */

.aifg-portal .aifg-portal-stylist-off {
	margin-block-end: 18px;
	color: var(--aifgp-muted, #8A8178);
}

.aifg-portal .aifg-portal-stylist-off p {
	margin: 0;
}

.aifg-portal .aifg-portal-stylist-form .aifg-portal-field {
	margin-block-end: 14px;
}

.aifg-portal .aifg-portal-stylist-form .aifg-portal-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.aifg-portal .aifg-portal-stylist-grid {
	margin-block-start: 22px;
}

.aifg-portal .aifg-portal-stylist-grid:empty {
	margin-block-start: 0;
}

.aifg-portal .aifg-portal-stylist-reason {
	margin: 0;
	font-size: var(--aifgp-size-sm, 14px);
	line-height: 1.45;
	color: var(--aifgp-muted, #8A8178);
	overflow-wrap: anywhere;
}

.aifg-portal .aifg-portal-stylist-pick .aifg-portal-product-media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.aifg-portal #aifg-portal-stylist-empty {
	margin-block-start: 20px;
}

/* =====================================================================
 * 6. Small screens (works at 390px: no fixed widths, nothing to scroll)
 * ===================================================================== */

@container aifgportal (max-width: 520px) {
	.aifg-portal .aifg-portal-reviews-item {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
	}

	.aifg-portal .aifg-portal-reviews-stars__glyph svg {
		inline-size: 30px;
		block-size: 30px;
	}

	.aifg-portal .aifg-portal-reviews-form .aifg-portal-form-actions,
	.aifg-portal .aifg-portal-stylist-form .aifg-portal-form-actions {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Engines without container queries fall back to the viewport, which is the
   same answer on a phone. */
@supports not (container-type: inline-size) {
	@media (max-width: 520px) {
		.aifg-portal .aifg-portal-reviews-item {
			grid-template-columns: 72px minmax(0, 1fr);
			gap: 14px;
		}

		.aifg-portal .aifg-portal-reviews-stars__glyph svg {
			inline-size: 30px;
			block-size: 30px;
		}

		.aifg-portal .aifg-portal-reviews-form .aifg-portal-form-actions,
		.aifg-portal .aifg-portal-stylist-form .aifg-portal-form-actions {
			align-items: flex-start;
			flex-direction: column;
		}
	}
}

/* =====================================================================
 * Account security and privacy (v3.9.0)
 *
 * Appended to assets/css/aifg-portal.css. House rules of that file apply:
 * every selector starts at `.aifg-portal`, every colour, radius and size is
 * an `--aifgp-*` custom property carrying the same literal fallback the
 * stylesheet already uses, and the box model is written in logical
 * properties because the shop reads right to left.
 *
 * The two tabs reuse the card, the field, the button, the hint and the
 * is-ok/is-error form status that are already there. What is new here is the
 * enrolment furniture — a QR that has to stay black on white to scan, a key
 * meant to be read one character at a time, a grid of backup codes — and a
 * quiet accent on the block that erases an account.
 * ===================================================================== */

/* ---- Two-factor: layout of the tab ---- */

.aifg-portal .aifg-portal-2fa-card > * + * {
	margin-block-start: 14px;
}

.aifg-portal .aifg-portal-2fa-step[hidden] {
	/* The card sets `display` on its children, which outranks the browser's
	   own rule for [hidden] and would leave the finished step on screen. */
	display: none;
}

.aifg-portal .aifg-portal-2fa-step + .aifg-portal-2fa-step {
	margin-block-start: 22px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
}

.aifg-portal .aifg-portal-2fa-step > * + * {
	margin-block-start: 12px;
}

/* ---- The QR ---- */

.aifg-portal .aifg-portal-2fa-qr {
	display: flex;
	justify-content: center;
	padding: 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius, 14px);
	/* Deliberately not a surface token: the code is black on white because a
	   scanner needs that contrast whatever the shop's palette is, so the
	   frame around it stays white too. */
	background: #FFFFFF;
}

.aifg-portal .aifg-portal-2fa-qr svg {
	inline-size: 100%;
	/* A version-8 code is 49 modules; below roughly 220px the modules start
	   to fall below a phone camera's comfortable resolution. */
	max-inline-size: 260px;
	block-size: auto;
}

/* ---- The key, for typing in by hand ---- */

.aifg-portal .aifg-portal-2fa-secret {
	display: block;
	padding: 12px 14px;
	border: 1px dashed var(--aifgp-accent, #B8905F);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
	color: var(--aifgp-primary, #1F1B16);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--aifgp-size-base, 16px);
	font-weight: 700;
	letter-spacing: .14em;
	text-align: center;
	/* Thirty-two characters have to wrap rather than widen the card at
	   390px, and they must never become a horizontal scrollbar. */
	overflow-wrap: anywhere;
}

/* ---- Backup codes ---- */

.aifg-portal .aifg-portal-2fa-backup {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aifg-portal .aifg-portal-2fa-backup li {
	padding: 10px 8px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-bg, #FAF7F2);
	color: var(--aifgp-text, #241F19);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--aifgp-size-base, 16px);
	font-weight: 700;
	letter-spacing: .12em;
	text-align: center;
	overflow-wrap: anywhere;
}

/* ---- The protected state ---- */

.aifg-portal .aifg-portal-2fa-card--on {
	border-color: var(--aifgp-success, #2F9E68);
}

.aifg-portal .aifg-portal-2fa-state {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--aifgp-success, #2F9E68);
	font-size: var(--aifgp-size-base, 16px);
}

.aifg-portal .aifg-portal-2fa-state__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

/* ---- The field on the login forms ----
   Not styled here: wp-login and the WooCommerce account page do not load this
   stylesheet, so that markup carries only their own classes. */

/* ---- Privacy ---- */

.aifg-portal .aifg-portal-privacy-block > * + * {
	margin-block-start: 12px;
}

.aifg-portal .aifg-portal-privacy-block--danger {
	border-color: var(--aifgp-danger, #D2493F);
}

.aifg-portal .aifg-portal-privacy-block--danger .aifg-portal-subtitle {
	color: var(--aifgp-danger, #D2493F);
}

.aifg-portal .aifg-portal-privacy-consent {
	/* The shared switch field aligns itself to the end of a form grid; here it
	   is the only thing in the card and wants the full width, with the label
	   free to wrap onto two lines beside the box. */
	align-self: auto;
	align-items: flex-start;
	inline-size: 100%;
	cursor: pointer;
}

.aifg-portal .aifg-portal-privacy-consent > span {
	color: var(--aifgp-text, #241F19);
	font-size: var(--aifgp-size-base, 16px);
	font-weight: 400;
	line-height: 1.55;
}

.aifg-portal .aifg-portal-privacy-consent input[type="checkbox"] {
	/* Line it up with the first line of the label rather than the middle of a
	   two-line one. */
	margin-block-start: 3px;
}

/* =====================================================================
 * Shared field: the textarea (v3.9.0)
 *
 * `.aifg-portal-field` styled its input and its select but never its
 * textarea, so every module that needed a multi-line field was about to
 * re-declare it. One declaration, here, for all of them.
 * ===================================================================== */

.aifg-portal .aifg-portal-field textarea {
	inline-size: 100%;
	min-block-size: 76px;
	padding: 12px 14px;
	border: 1px solid var(--aifgp-border, #E8E1D7);
	border-radius: var(--aifgp-radius-sm, 8px);
	background: var(--aifgp-surface, #FFFFFF);
	color: var(--aifgp-text, #241F19);
	font-family: var(--aifgp-font, system-ui, sans-serif);
	font-size: var(--aifgp-size-base, 16px);
	line-height: 1.5;
	resize: vertical;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.aifg-portal .aifg-portal-field textarea:focus {
	outline: none;
	border-color: var(--aifgp-primary, #1F1B16);
	box-shadow: 0 0 0 3px var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
}

/* ===== Phone: touch targets and readable type ============================
   Measured at 390px, where the theme leaves the portal ~298px. Every number
   below was short of the 44px a finger needs, or under the 12px a phone can
   read; the audit that produced them is in the project notes. Scoped to the
   phone breakpoint on purpose — the desktop proportions the shop signed off
   are left exactly as they are.

   Declared last so it wins over the earlier container blocks in both engines,
   the way the navigation block above already does. ===================== */
@container aifgportal (max-width: 480px) {
	/* 40.8px: 11px of padding either side of a 1.2 line-height. */
	.aifg-portal-btn {
		min-block-size: 44px;
	}

	/* 30.3px, and it is the only control on a row of order actions. */
	.aifg-portal-btn--sm {
		min-block-size: 44px;
		font-size: max(12px, .85em);
	}

	/* 23px tall: a bare inline link, and on a product card it is the main
	   tap target of the whole card. */
	.aifg-portal-link,
	.aifg-portal button.aifg-portal-link,
	.aifg-portal-product-title,
	.aifg-portal .aifg-portal-reviews-item__title {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}

	/* A "see all" link is only as wide as its two words, which leaves a 28px
	   target in a card header. The inline padding costs nothing there. */
	.aifg-portal-link,
	.aifg-portal button.aifg-portal-link {
		padding-inline: 8px;
	}

	/* Badges and timestamps rendered between 10.9px and 11.5px. */
	.aifg-portal-nav__badge,
	.aifg-portal-quicklink__badge {
		font-size: max(12px, .78em);
	}

	.aifg-portal-bell-badge {
		font-size: 12px;
	}

	.aifg-portal-badge {
		font-size: max(12px, .82em);
	}

	/* The star is a 26px glyph in a 2px label: 34px of target for the single
	   control that sets a review's rating. */
	.aifg-portal .aifg-portal-reviews-stars label {
		padding: 9px;
	}

	/* …which makes the row of five 248px wide, and the review's two-column
	   layout only gave its body 174px of that. One column at phone width, with
	   the thumbnail kept to its own size rather than stretched across the card:
	   the body gets the full 260px and the rating fits with room to spare. */
	.aifg-portal .aifg-portal-reviews-item {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.aifg-portal .aifg-portal-reviews-item__media {
		max-inline-size: 104px;
	}

	/* The returns form sets padding on its file input; the reviews form never
	   got the same rule, so this one stayed 22px tall. */
	.aifg-portal .aifg-portal-reviews-form input[type="file"] {
		min-block-size: 44px;
		padding-block: 10px;
	}

	/* A native checkbox at its UA default, 18px, gating the privacy consent.
	   Enlarging the box and padding its row gives a 44px pointer target while
	   it stays a real checkbox. */
	.aifg-portal #aifg-portal-consent-toggle {
		inline-size: 22px;
		block-size: 22px;
		margin-block: 11px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 480px) {
		.aifg-portal-btn {
			min-block-size: 44px;
		}

		.aifg-portal-btn--sm {
			min-block-size: 44px;
			font-size: max(12px, .85em);
		}

		.aifg-portal-link,
		.aifg-portal button.aifg-portal-link,
		.aifg-portal-product-title,
		.aifg-portal .aifg-portal-reviews-item__title {
			display: inline-flex;
			align-items: center;
			min-block-size: 44px;
		}

		.aifg-portal-link,
		.aifg-portal button.aifg-portal-link {
			padding-inline: 8px;
		}

		.aifg-portal-nav__badge,
		.aifg-portal-quicklink__badge {
			font-size: max(12px, .78em);
		}

		.aifg-portal-bell-badge {
			font-size: 12px;
		}

		.aifg-portal-badge {
			font-size: max(12px, .82em);
		}

		.aifg-portal .aifg-portal-reviews-stars label {
			padding: 9px;
		}

		.aifg-portal .aifg-portal-reviews-item {
			grid-template-columns: minmax(0, 1fr);
			gap: 12px;
		}

		.aifg-portal .aifg-portal-reviews-item__media {
			max-inline-size: 104px;
		}

		.aifg-portal .aifg-portal-reviews-form input[type="file"] {
			min-block-size: 44px;
			padding-block: 10px;
		}

		.aifg-portal #aifg-portal-consent-toggle {
			inline-size: 22px;
			block-size: 22px;
			margin-block: 11px;
		}
	}
}

/* =====================================================================
 * The avatar guide — the card, the full screen and the first-visit dialogue
 *
 * Mobile-first: the step list and the example grid are single-column by
 * default and widen with the container, because a customer photographs
 * herself on a phone and reads this there.
 * ===================================================================== */

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__steps {
	display: grid;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__steps > li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	margin: 0;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 28px;
	block-size: 28px;
	border-radius: 50%;
	background: var(--aifgp-accent, #8C7A5B);
	color: #FFF;
	font-size: max(12px, .82em);
	font-weight: 700;
	line-height: 1;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__step {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__step > strong {
	font-size: var(--aifgp-size-sm, 14px);
	color: var(--aifgp-text, #241F19);
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__step > span {
	color: var(--aifgp-muted, #8A8178);
	font-size: max(12px, .9em);
	line-height: 1.45;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__steps--tight > li {
	gap: 10px;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__more {
	margin-block: 14px 0;
}

/* ---- The four examples ---- */
:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__ex {
	display: grid;
	gap: 8px;
	margin: 0;
	min-inline-size: 0;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__img {
	display: block;
	/* The intrinsic 600px of the file would otherwise floor the grid track and
	   force one example per row, where `minmax(min(132px, 100%), 1fr)` intends two. */
	min-inline-size: 0;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--aifgp-radius-sm, 8px);
	border: 2px solid var(--aifgp-border, #E8E1D7);
	background: var(--aifgp-placeholder, #F4F0EA);
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__ex.is-good .aifg-portal-avguide__img {
	border-color: var(--aifgp-accent, #8C7A5B);
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__excap {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__excap > strong {
	font-size: max(12px, .9em);
	color: var(--aifgp-text, #241F19);
}

:is(.aifg-portal, .aifg-portal-avguide-modal) .aifg-portal-avguide__excap > span {
	font-size: max(12px, .82em);
	color: var(--aifgp-muted, #8A8178);
	line-height: 1.4;
}

/* ---- The first-visit dialogue ----
   The scrim is the dialogue's own box, so a click that misses the panel
   closes it — the gesture every other dialogue in the portal uses. */
.aifg-portal-avguide-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(24, 19, 14, .55);
	overflow-y: auto;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.aifg-portal-avguide-modal__dialog {
	inline-size: 100%;
	max-inline-size: 460px;
	max-block-size: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px;
	border-radius: var(--aifgp-radius, 14px);
	background: var(--aifgp-surface, #FFF);
	box-shadow: 0 24px 60px -24px rgba(20, 15, 10, .5);
}

.aifg-portal-avguide-modal__title {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.25;
	color: var(--aifgp-text, #241F19);
}

.aifg-portal-avguide-modal__sub {
	margin: 0;
	color: var(--aifgp-muted, #8A8178);
	font-size: max(12px, .92em);
	line-height: 1.5;
}

.aifg-portal-avguide-modal__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 18px;
}

.aifg-portal-avguide-modal__foot > .aifg-portal-btn {
	flex: 1 1 auto;
	justify-content: center;
	min-block-size: 44px;
}

/* The page behind a dialogue must not scroll under it. */
.aifg-portal-avguide-open,
.aifg-portal-avguide-open body {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.aifg-portal-avguide-modal {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* =====================================================================
 * 20. Mode application (téléphone)
 *
 * Below 600px the customer area stops pretending to be a page in a theme
 * column. A phone customer navigates with her thumb at the bottom of the
 * screen, reads one column edge to edge, and expects the section she is in
 * to stay named at the top while she scrolls. That is the whole section.
 *
 * Everything here is driven by a *viewport* media query, not the container
 * query the rest of the stylesheet uses. The container query answers "how
 * much room did the theme give me", which is the right question for a card
 * inside a column; an application shell is a property of the screen, and the
 * fixed bar has to measure itself against the window whatever column the
 * portal was handed.
 *
 * The bar and the sheet are printed outside the portal wrapper, because that
 * wrapper carries `container-type: inline-size` — layout containment, which
 * would make it the containing block of anything `fixed` inside it and pin
 * the bar to the bottom of the card instead of the bottom of the screen.
 * ===================================================================== */

/* ---- The bar ------------------------------------------------------- */

/* Hidden by default, at every width: a desktop keeps its sidebar. */
.aifg-portal-appbar,
.aifg-portal-appsheet {
	display: none;
}

@media (max-width: 600px) {
	.aifg-portal-appbar {
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: 99;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		align-items: stretch;
		gap: 2px;
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
		background: color-mix(in srgb, var(--aifgp-surface, #FFFFFF) 92%, transparent);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
		border-block-start: 1px solid var(--aifgp-border, #E8E1D7);
		box-shadow: 0 -6px 20px rgba(20, 15, 10, .07);
		font-family: var(--aifgp-font, system-ui, -apple-system, sans-serif);
	}

	.aifg-portal-appbar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-block-size: 52px;
		padding: 4px 2px;
		border: 0;
		border-radius: 12px;
		background: none;
		color: var(--aifgp-muted, #8A8178);
		font-family: inherit;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: color .16s ease, background-color .16s ease;
	}

	.aifg-portal-appbar__icon {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 24px;
		block-size: 24px;
	}

	.aifg-portal-appbar__icon svg {
		inline-size: 22px;
		block-size: 22px;
	}

	/* The label is the second line and the first thing to give way: a long
	   Hebrew tab name must not push the five columns out of alignment. */
	.aifg-portal-appbar__label {
		display: block;
		inline-size: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* A count on a 52px target would be unreadable; presence is the message. */
	.aifg-portal-appbar__dot {
		position: absolute;
		inset-block-start: -1px;
		inset-inline-end: -1px;
		inline-size: 8px;
		block-size: 8px;
		border-radius: 50%;
		background: var(--aifgp-danger, #B4453C);
		box-shadow: 0 0 0 2px var(--aifgp-surface, #FFFFFF);
	}

	.aifg-portal-appbar__item.is-active {
		color: var(--aifgp-text, #241F19);
		background: var(--aifgp-primary-soft, rgba(31, 27, 22, .06));
	}

	.aifg-portal-appbar__item:focus-visible {
		outline: 2px solid var(--aifgp-primary, #1F1B16);
		outline-offset: -2px;
	}

	/* ---- The sheet ------------------------------------------------- */

	.aifg-portal-appsheet {
		position: fixed;
		inset: 0;
		z-index: 100;
		display: flex;
		align-items: flex-end;
		background: rgba(20, 15, 10, .42);
		font-family: var(--aifgp-font, system-ui, -apple-system, sans-serif);
	}

	.aifg-portal-appsheet[hidden] {
		display: none;
	}

	.aifg-portal-appsheet__panel {
		inline-size: 100%;
		max-block-size: 82vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
		background: var(--aifgp-surface, #FFFFFF);
		border-start-start-radius: 20px;
		border-start-end-radius: 20px;
		animation: aifg-portal-appsheet-in .22s ease;
	}

	@keyframes aifg-portal-appsheet-in {
		from { transform: translateY(14%); opacity: .6; }
		to   { transform: translateY(0); opacity: 1; }
	}

	.aifg-portal-appsheet__grip {
		inline-size: 40px;
		block-size: 4px;
		margin: 2px auto 12px;
		border-radius: 999px;
		background: var(--aifgp-border, #E8E1D7);
	}

	.aifg-portal-appsheet__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.aifg-portal-appsheet__item {
		display: flex;
		align-items: center;
		gap: 10px;
		min-block-size: 52px;
		padding: 10px 12px;
		border-radius: 12px;
		background: var(--aifgp-bg, #FAF7F2);
		color: var(--aifgp-text, #241F19);
		font-size: var(--aifgp-size-sm, 14px);
		font-weight: 600;
		text-decoration: none;
	}

	.aifg-portal-appsheet__icon {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.aifg-portal-appsheet__icon svg {
		inline-size: 20px;
		block-size: 20px;
	}

	.aifg-portal-appsheet__label {
		min-inline-size: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.aifg-portal-appsheet__badge {
		margin-inline-start: auto;
		min-inline-size: 20px;
		padding: 1px 6px;
		border-radius: 999px;
		background: var(--aifgp-accent-soft, rgba(184, 144, 95, .12));
		color: var(--aifgp-accent, #B8905F);
		font-size: 11px;
		font-weight: 700;
		text-align: center;
	}

	.aifg-portal-appsheet__item.is-active {
		background: var(--aifgp-primary, #1F1B16);
		color: var(--aifgp-on-primary, #FFFFFF);
	}

	.aifg-portal-appsheet__item--logout {
		grid-column: 1 / -1;
		justify-content: center;
		background: none;
		color: var(--aifgp-danger, #B4453C);
	}

	.aifg-portal-appsheet__close {
		inline-size: 100%;
		margin-block-start: 12px;
		min-block-size: 48px;
	}

	/* The page behind a sheet does not scroll. */
	.aifg-portal-appsheet-open,
	.aifg-portal-appsheet-open body {
		overflow: hidden;
	}

	/* ---- The shell itself ------------------------------------------ */

	/* Edge to edge. The negative margin is measured in JS against the window,
	   because the theme column the portal sits in is not necessarily centred
	   and a `50% - 50vw` guess would be wrong by exactly that offset — the
	   Elementor + WooCommerce account layout this runs on is one such case.
	   Zero until JS says otherwise, so the page is never worse than before. */
	.aifg-portal {
		margin-inline-start: var(--aifgp-bleed-s, 0px);
		margin-inline-end: var(--aifgp-bleed-e, 0px);
		/* The root is given a definite `100%` width (so inline-size containment
		   cannot collapse it) and caps itself at `100%` (so a theme child can
		   never create a page scrollbar). Both are exactly what the negative
		   margin is trying to beat here, so on a phone the width comes from the
		   same JS measurement as the margins — an exact pixel count, never
		   `100vw`, which on some engines counts a scrollbar that is not there. */
		inline-size: var(--aifgp-bleed-w, 100%);
		max-inline-size: none;
		padding: 0 0 calc(74px + env(safe-area-inset-bottom, 0px));
		border-radius: 0;
		background: var(--aifgp-bg, #FAF7F2);
	}

	/* The title bar stays named while the content scrolls under it. */
	.aifg-portal-topbar {
		position: sticky;
		inset-block-start: 0;
		z-index: 3;
		justify-content: space-between;
		margin-block-end: 12px;
		margin-inline: -12px;
		padding: 10px 16px;
		min-block-size: 52px;
		background: color-mix(in srgb, var(--aifgp-bg, #FAF7F2) 92%, transparent);
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
	}

	.aifg-portal-topbar__title {
		display: block;
	}

	/* The section heading that repeats the bar's title, marked by the script. */
	.aifg-portal-main h1.aifg-portal-title--echo {
		display: none;
	}

	.admin-bar .aifg-portal-topbar {
		inset-block-start: 46px;
	}

	/* The portal's own header is redundant once the section is named above
	   the content, and it costs a screenful on a phone. */
	.aifg-portal-head {
		display: none;
	}

	/* The sidebar keeps the identity card and loses the tab list: the bar at
	   the bottom carries navigation now, and two navigations on one screen is
	   one too many. */
	.aifg-portal-shell {
		gap: 14px;
	}

	.aifg-portal-side {
		padding: 14px;
		margin-inline: 12px;
	}

	.aifg-portal-side > .aifg-portal-nav {
		display: none;
	}

	.aifg-portal-user {
		padding-block-end: 0;
		margin-block-end: 0;
		border-block-end: 0;
	}

	.aifg-portal-main {
		padding-inline: 12px;
	}

	/* An admin bar is `position: fixed` on a phone and would cover the sticky
	   title; WordPress pushes the page down by 46px, and the sticky offset has
	   to match or the title hides under it. */
	.admin-bar .aifg-portal-head {
		inset-block-start: 46px;
	}
}

/* A short screen in landscape: the bar would eat a third of it. */
@media (max-width: 600px) and (max-height: 430px) {
	.aifg-portal-appbar__label {
		display: none;
	}

	.aifg-portal-appbar__item {
		min-block-size: 44px;
	}

	.aifg-portal {
		padding-block-end: calc(56px + env(safe-area-inset-bottom, 0px));
	}
}

@media (prefers-reduced-motion: reduce) {
	.aifg-portal-appsheet__panel {
		animation: none;
	}
}