/*
 * Fitness Project Dashboard styles.
 * White background, Geologica typeface throughout, tan accents.
 */

/* ============================================================
 * Page-level Geologica override.
 * Applied to the whole WooCommerce account page so the typeface
 * is consistent across our custom dashboard AND any default WC
 * markup the theme might style (page title, breadcrumbs, login
 * forms shown to logged-out users, etc.).
 *
 * !important is used here because most themes target h1/h2/.button
 * with specific font-family rules that would otherwise win.
 * ============================================================ */
body.woocommerce-account,
body.woocommerce-account input,
body.woocommerce-account select,
body.woocommerce-account textarea,
body.woocommerce-account button,
body.woocommerce-account a,
body.woocommerce-account h1,
body.woocommerce-account h2,
body.woocommerce-account h3,
body.woocommerce-account h4,
body.woocommerce-account h5,
body.woocommerce-account h6,
body.woocommerce-account p,
body.woocommerce-account span,
body.woocommerce-account li,
body.woocommerce-account label,
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce *,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-navigation *,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-content * {
	font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

/* Single product pages where workouts/plans live also pick up Geologica
   so the experience feels consistent end-to-end. */
body.single-product .product,
body.single-product .product * {
	font-family: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

.fpd-dash, .fpd-library, .fpd-favourites,
.fpd-calendar, .fpd-profile {
	--fpd-bg:       #ffffff;
	--fpd-surface:  #ffffff;
	--fpd-soft:     #F5F1ED;
	--fpd-ink:      #191919;
	--fpd-ink-2:    #4D4D4D;
	--fpd-ink-3:    #888888;
	--fpd-tan:      #E1D3BE;
	--fpd-tan-deep: #191919;
	--fpd-tan-soft: #F5F1ED;
	--fpd-border:   rgba(25, 25, 25, .10);
	--fpd-border-2: rgba(25, 25, 25, .22);
	--fpd-danger:   #b54141;
	--fpd-success:  #3a7d5a;

	--fpd-radius:   14px;
	--fpd-radius-s: 10px;

	--fpd-sans:  'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--fpd-serif: 'Geologica', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	font-family: var(--fpd-sans);
	color: var(--fpd-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* WC menu tweaks */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-MyAccount-navigation li a {
	font-family: 'Geologica', sans-serif;
	font-size: 14.5px;
	color: #191919;
	padding: 10px 14px;
	border-radius: 8px;
	display: block;
	transition: background .15s, color .15s;
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li a:hover { background: rgba(25, 25, 25, .04); }
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--is-active a {
	background: #191919; color: #fff;
}

/* Headlines */
.fpd-display {
	font-family: var(--fpd-serif);
	font-weight: 500;
	font-size: clamp(28px, 4vw, 38px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0;
}

.fpd-eyebrow { font-size: 14px; color: var(--fpd-ink-3); margin: 0 0 4px; }

.fpd-section { margin: 32px 0; }

.fpd-section__title {
	font-family: var(--fpd-serif) !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	margin: 0 0 16px !important;
	color: var(--fpd-ink) !important;
	line-height: 1.3 !important;
}

.fpd-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.fpd-section__header .fpd-section__title { margin: 0; }

.fpd-link {
	color: var(--fpd-tan-deep);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
}
.fpd-link:hover { text-decoration: underline; }

.fpd-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 13px;
	color: var(--fpd-ink-2);
	margin: 4px 0 12px;
}
.fpd-meta span + span::before {
	content: "·";
	margin-right: 12px;
	color: var(--fpd-ink-3);
}
.fpd-meta--tight { font-size: 12.5px; margin: 2px 0 0; }

.fpd-empty {
	text-align: center;
	padding: 24px 16px;
	background: var(--fpd-soft);
	border-radius: var(--fpd-radius);
}
.fpd-empty__text { color: var(--fpd-ink-2); font-size: 14.5px; margin: 0 0 16px; }

/* Buttons */
.fpd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .01em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .15s, opacity .2s;
	text-decoration: none;
	min-height: 42px;
	white-space: nowrap;
}
.fpd-btn--primary { background: var(--fpd-ink); color: #fff; }
.fpd-btn--primary:hover { background: #000; transform: translateY(-1px); }
.fpd-btn--ghost { background: transparent; color: var(--fpd-ink-2); border-color: var(--fpd-border); }
.fpd-btn--ghost:hover { border-color: var(--fpd-ink); color: var(--fpd-ink); }
.fpd-btn--ghost.is-fav { border-color: var(--fpd-tan-deep); color: var(--fpd-tan-deep); }
.fpd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Modal + popup buttons follow the brand palette: beige primary,
   transparent ghost with ink border, danger stays red. The default
   .fpd-btn--primary is ink-black for non-modal contexts (cart,
   checkout); modals get the beige treatment so they read as a calm
   in-page panel rather than a high-contrast alert. */
.fpd-modal__panel .fpd-btn--primary,
.fpd-item-menu .fpd-btn--primary {
	background: var(--fpd-tan, #E1D3BE);
	color: var(--fpd-ink, #191919);
}
.fpd-modal__panel .fpd-btn--primary:hover,
.fpd-item-menu .fpd-btn--primary:hover {
	background: var(--fpd-ink, #191919);
	color: #fff;
	transform: translateY(-1px);
}
.fpd-modal__panel .fpd-btn--ghost,
.fpd-item-menu .fpd-btn--ghost {
	background: transparent;
	color: var(--fpd-ink, #191919);
	border-color: var(--fpd-ink, #191919);
}
.fpd-modal__panel .fpd-btn--ghost:hover,
.fpd-item-menu .fpd-btn--ghost:hover {
	background: var(--fpd-ink, #191919);
	color: #fff;
}

.fpd-btn.is-loading { pointer-events: none; position: relative; }
.fpd-btn.is-loading > * { opacity: 0; }
.fpd-btn.is-loading::after {
	content: ""; position: absolute;
	width: 16px; height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: fpd-spin .7s linear infinite;
}
@keyframes fpd-spin { to { transform: rotate(360deg); } }

.fpd-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1.5px solid var(--fpd-border);
	background: #fff;
	color: var(--fpd-ink);
	text-decoration: none;
	font-size: 14px;
	cursor: pointer;
}
.fpd-iconbtn:hover { border-color: var(--fpd-ink); }

/* Weekly strip */
.fpd-dash__hello { margin-bottom: 18px; }

.fpd-weekstrip {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin: 0 0 24px;
}
.fpd-weekstrip__day {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 4px;
	border-radius: 12px;
	background: var(--fpd-soft);
	border: 1.5px solid transparent;
	font-size: 12.5px;
	color: var(--fpd-ink-2);
}
.fpd-weekstrip__day.is-today { background: var(--fpd-ink); color: #fff; border-color: var(--fpd-ink); }
.fpd-weekstrip__day.is-done { background: var(--fpd-tan-soft); color: var(--fpd-tan-deep); }
.fpd-weekstrip__wd { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; opacity: .8; }
.fpd-weekstrip__num { font-family: var(--fpd-serif); font-size: 18px; font-weight: 500; }
.fpd-weekstrip__dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-top: 4px; opacity: .55; }

/* Workout cards */
.fpd-stack { display: flex; flex-direction: column; gap: 16px; }
.fpd-grid { display: grid; gap: 16px; }
.fpd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fpd-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
	.fpd-grid--2, .fpd-grid--3 { grid-template-columns: 1fr; }
}

.fpd-workout-card {
	display: flex;
	flex-direction: column;
	background: var(--fpd-surface);
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	position: relative;
}
.fpd-workout-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -16px rgba(25, 25, 25, .25);
	border-color: var(--fpd-border-2);
}
.fpd-workout-card.is-done { opacity: .85; }

.fpd-workout-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--fpd-soft);
}
.fpd-workout-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.5));
	opacity: 0;
	transition: opacity .2s;
}
.fpd-workout-card:hover .fpd-workout-card__play { opacity: 1; }

.fpd-workout-card__badge {
	position: absolute;
	bottom: 12px;
	left: 12px;
	background: var(--fpd-success);
	color: #fff;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 500;
}

.fpd-workout-card__body { padding: 14px 16px 16px; }

.fpd-workout-card__title {
	font-family: var(--fpd-serif);
	font-weight: 500;
	font-size: 17px;
	margin: 0 0 4px;
	color: var(--fpd-ink);
}

.fpd-workout-card__actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

.fpd-workout-card--hero { flex-direction: row; align-items: stretch; }
.fpd-workout-card--hero .fpd-workout-card__media { width: 38%; aspect-ratio: auto; min-height: 200px; }
.fpd-workout-card--hero .fpd-workout-card__body { flex: 1; padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; }
.fpd-workout-card--hero .fpd-workout-card__title { font-size: 22px; }

@media (max-width: 600px) {
	.fpd-workout-card--hero { flex-direction: column; }
	.fpd-workout-card--hero .fpd-workout-card__media { width: 100%; aspect-ratio: 16/10; min-height: 0; }
}

/* Heart */
.fpd-fav {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	border: none;
	color: var(--fpd-ink-3);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(4px);
	transition: color .15s, transform .15s;
}
.fpd-fav:hover { color: var(--fpd-tan-deep); transform: scale(1.05); }
.fpd-fav.is-fav { color: var(--fpd-tan-deep); }

/* Library */
.fpd-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--fpd-soft);
	border: 1.5px solid var(--fpd-border);
	border-radius: 999px;
	padding: 4px 18px 4px 16px;
	margin-bottom: 16px;
	transition: border-color .15s;
}
.fpd-search:focus-within { border-color: var(--fpd-ink); background: #fff; }
.fpd-search svg { color: var(--fpd-ink-3); flex-shrink: 0; }
.fpd-search input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	padding: 10px 0;
	color: var(--fpd-ink);
}
.fpd-search input::placeholder { color: var(--fpd-ink-3); }

.fpd-library__meta { font-size: 13px; color: var(--fpd-ink-3); margin-bottom: 16px; }

.fpd-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}
.fpd-pagination__info { font-size: 13.5px; color: var(--fpd-ink-3); }

/* Calendar */
.fpd-calendar__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 12px;
}
.fpd-calendar__title {
	font-family: var(--fpd-serif) !important;
	font-weight: 500 !important;
	font-size: 20px !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}
.fpd-calendar__nav { display: flex; gap: 6px; }

.fpd-calendar__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));   /* minmax(0,1fr) so columns can shrink below content size */
	gap: 4px;
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius);
	background: var(--fpd-border);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
}

.fpd-calendar__wd {
	background: var(--fpd-soft);
	padding: 10px 8px;
	font-size: 12px;
	color: var(--fpd-ink-3);
	text-align: center;
	letter-spacing: .04em;
	font-weight: 500;
	min-width: 0;          /* allow column to shrink */
	overflow: hidden;
}

.fpd-calendar__cell {
	background: #fff;
	min-height: 80px;
	padding: 6px 8px;
	font-size: 13px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;          /* critical: lets the cell shrink with the grid */
	overflow: hidden;
}
.fpd-calendar__cell.is-outside { background: var(--fpd-soft); color: var(--fpd-ink-3); }
.fpd-calendar__cell.is-today .fpd-calendar__daynum {
	background: var(--fpd-ink);
	color: #fff;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}
.fpd-calendar__daynum { font-weight: 500; margin-bottom: 4px; }

.fpd-calendar__item {
	display: block;
	font-size: 11px;
	color: var(--fpd-ink);
	background: var(--fpd-tan-soft);
	padding: 2px 6px;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fpd-calendar__item:hover { background: var(--fpd-tan); color: #fff; }
.fpd-calendar__item.is-done { background: var(--fpd-success); color: #fff; opacity: .9; }

/* ───────────────────────────────────────────────────────────
   Mobile + tablet agenda view (≤1024px).

   The 7-column grid is unusable on phones — cells become 40-50px
   wide and workout titles don't fit. We switch to an agenda list:
   each day with workouts is a card stacked vertically, with the
   Greek day name + date as a header. Empty days hide by default
   behind a toggle button so the list stays focused on what the
   user has scheduled.

   Today's cell stays visible even when empty (acts as a focal
   point + a quick add target). Outside-month cells drop entirely.

   Desktops (>1024px) keep the full 7-column grid layout.
   ─────────────────────────────────────────────────────────── */
/* ───────────────────────────────────────────────────────────
   Mobile + tablet calendar (≤1024px).

   Stays a monthly 7-col grid (columns = weekdays, rows = weeks)
   — same shape as desktop. Each cell shows:
     • day number top-left (small disc when today)
     • centered "▶ N" pill badge per scheduled workout
     • compact 3-dot button below each badge

   All layout selectors use the `.fpd-calendar` parent prefix so
   their specificity (0,0,3,0 or higher) cleanly beats the
   later-defined desktop rules in this file.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.fpd-calendar { padding: 0; }
	.fpd-calendar__header {
		flex-wrap: wrap;
		gap: 8px;
	}
	.fpd-calendar__title { font-size: 17px; }

	/* Grid stays 7-col but tighter */
	.fpd-calendar__grid {
		gap: 2px;
	}
	.fpd-calendar__wd {
		padding: 6px 2px;
		font-size: 10px;
		letter-spacing: 0;
	}
	.fpd-calendar .fpd-calendar__cell {
		min-height: 78px;
		padding: 4px 3px 6px;
		font-size: 11px;
		gap: 3px;
		align-items: stretch;
	}
	.fpd-calendar .fpd-calendar__daynum {
		font-size: 11px;
		font-weight: 600;
		margin-bottom: 2px;
		line-height: 1;
	}
	.fpd-calendar__cell.is-today .fpd-calendar__daynum {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}

	/* Each scheduled workout: wrap stacks badge + 3-dot vertically,
	   centered, with tight spacing. */
	.fpd-calendar .fpd-calendar__item-wrap {
		position: relative;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 3px !important;
	}

	/* "▶ N" pill badge — beige background, ink text, centered.
	   Reads as one clear, tappable unit. */
	.fpd-calendar .fpd-calendar__item-wrap .fpd-calendar__item {
		display: inline-flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: center !important;
		width: auto !important;
		min-width: 32px;
		max-width: 100%;
		padding: 3px 8px !important;
		gap: 4px !important;
		font-size: 11px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		border-radius: 999px;
		text-align: center !important;
		white-space: nowrap !important;
		overflow: hidden;
		text-overflow: clip;
	}

	/* The play+number span inside the pill */
	.fpd-calendar__item-compact {
		display: inline-flex !important;
		align-items: center !important;
		gap: 3px !important;
		font-variant-numeric: tabular-nums;
	}
	.fpd-calendar__item-compact svg {
		flex-shrink: 0;
	}
	.fpd-calendar__item-num {
		font-size: 11px;
		line-height: 1;
	}

	/* 3-dot menu — compact pill below the badge, subtle background
	   so it reads as a secondary control without dominating. */
	.fpd-calendar .fpd-calendar__menu-btn {
		position: static !important;
		transform: none !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 16px;
		border-radius: 999px;
		background: rgba(25, 25, 25, .07);
		color: var(--fpd-ink-2, #4D4D4D);
		border: 0;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}
	.fpd-calendar .fpd-calendar__menu-btn:active {
		transform: scale(.95) !important;
		background: rgba(25, 25, 25, .12);
	}
	.fpd-calendar .fpd-calendar__menu-btn svg {
		width: 12px;
		height: 12px;
	}
}

/* Extra-narrow phones (≤380px): trim further so 7 columns still
   read without the badge crowding the day number. */
@media (max-width: 380px) {
	.fpd-calendar .fpd-calendar__cell {
		min-height: 70px;
		padding: 3px 2px 4px;
	}
	.fpd-calendar .fpd-calendar__item-wrap .fpd-calendar__item {
		padding: 2px 6px !important;
		min-width: 28px;
	}
	.fpd-calendar .fpd-calendar__menu-btn {
		width: 24px;
		height: 14px;
	}
}

/* Profile forms */
.fpd-form { max-width: 640px; }
.fpd-form--narrow { max-width: 420px; }

.fpd-field-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 14px 20px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid var(--fpd-border);
}
.fpd-field-row:last-of-type { border-bottom: none; }
.fpd-field-row__label { font-size: 14px; font-weight: 500; color: var(--fpd-ink); }

.fpd-field-row__input input,
.fpd-field-row__input select {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	font-family: inherit;
	font-size: 14.5px;
	border: 1.5px solid var(--fpd-border);
	border-radius: var(--fpd-radius-s);
	background: #fff;
	color: var(--fpd-ink);
}
.fpd-field-row__input input:focus,
.fpd-field-row__input select:focus {
	outline: none;
	border-color: var(--fpd-ink);
	box-shadow: 0 0 0 3px rgba(25, 25, 25, .08);
}

.fpd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fpd-chip-check {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1.5px solid var(--fpd-border);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	color: var(--fpd-ink-2);
	cursor: pointer;
	transition: all .15s;
}
.fpd-chip-check input { display: none; }
.fpd-chip-check:has(input:checked) { background: var(--fpd-ink); color: #fff; border-color: var(--fpd-ink); }

.fpd-meta-line { font-size: 14px; color: var(--fpd-ink-2); margin: 4px 0; }

@media (max-width: 600px) { .fpd-field-row { grid-template-columns: 1fr; gap: 6px; } }

.fpd-notice { padding: 12px 16px; border-radius: var(--fpd-radius-s); margin-bottom: 20px; font-size: 14px; }
.fpd-notice--success { background: #e8f3ec; color: var(--fpd-success); border: 1px solid rgba(58, 125, 90, .25); }
.fpd-notice--error   { background: #fbe9e9; color: var(--fpd-danger);  border: 1px solid rgba(181, 65, 65, .25); }

/* ============================================================
 * Programs library (purchased products from "programs" category,
 * each with collapsible Vimeo videos from the ACF repeater).
 * ============================================================ */

.fpd-programs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

@media (max-width: 720px) {
	.fpd-programs {
		grid-template-columns: 1fr;
	}
}

.fpd-program {
	background: #fff;
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius);
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}

.fpd-program[open] {
	border-color: var(--fpd-border-2);
	box-shadow: 0 8px 32px -20px rgba(25, 25, 25, .25);
}

.fpd-program__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
	position: relative;
}

.fpd-program__head::-webkit-details-marker { display: none; }

.fpd-program__thumb {
	width: 72px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--fpd-radius-s);
	background-size: cover;
	background-position: center;
	background-color: var(--fpd-soft);
}

.fpd-program__info {
	flex: 1;
	min-width: 0;
}

.fpd-program__title {
	font-family: var(--fpd-serif);
	font-weight: 600;
	font-size: 17px;
	margin: 0 0 2px;
	color: var(--fpd-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fpd-program__meta {
	font-size: 13px;
	color: var(--fpd-ink-3);
	margin: 0;
}

.fpd-program .fpd-fav {
	position: static;
	flex-shrink: 0;
	background: var(--fpd-soft);
}

.fpd-program__chevron {
	flex-shrink: 0;
	color: var(--fpd-ink-3);
	transition: transform .2s;
	display: inline-flex;
	align-items: center;
}

.fpd-program[open] .fpd-program__chevron {
	transform: rotate(180deg);
}

.fpd-program__body {
	padding: 4px 16px 20px;
	border-top: 1px solid var(--fpd-border);
	background: var(--fpd-soft);
}

.fpd-videos {
	display: grid;
	gap: 18px;
	margin-top: 16px;
}

.fpd-video {
	background: #fff;
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius-s);
	overflow: hidden;
}

.fpd-video__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}

.fpd-video__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fpd-video__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.fpd-video__info {
	padding: 14px 16px 16px;
}

.fpd-video__title {
	font-family: var(--fpd-serif);
	font-weight: 600;
	font-size: 15.5px;
	margin: 0 0 4px;
}

.fpd-video__desc {
	font-size: 13.5px;
	color: var(--fpd-ink-2);
	margin: 0;
	line-height: 1.55;
}

@media (max-width: 520px) {
	.fpd-program__head { padding: 10px 12px; gap: 12px; }
	.fpd-program__thumb { width: 56px; height: 44px; }
	.fpd-program__title { font-size: 15px; }
}

/* ============================================================
 * Minimal dashboard layout.
 * Centred, generous whitespace, matching the signup wizard feel.
 * ============================================================ */

.fpd-dash--minimal {
	max-width: 720px;
	margin: 0 auto;
}

.fpd-dash--minimal .fpd-dash__hello {
	text-align: center;
	margin-bottom: 28px;
	padding-top: 8px;
}

.fpd-dash--minimal .fpd-section {
	margin: 36px 0;
}

.fpd-dash--minimal .fpd-section__title {
	font-weight: 600;
	font-size: 17px;
	margin-bottom: 14px;
}

/* The weekly strip already exists — just give it more breathing room here */
.fpd-dash--minimal .fpd-weekstrip {
	margin: 0 0 32px;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* Empty state inside the minimal dashboard */
.fpd-dash--minimal .fpd-empty {
	background: var(--fpd-soft);
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius);
	padding: 32px 24px;
	text-align: center;
}

.fpd-dash--minimal .fpd-empty p {
	margin: 0 0 18px;
	color: var(--fpd-ink-2);
	font-size: 14.5px;
}

/* Tighten the calendar — feels lighter in a single-column layout */
.fpd-dash--minimal .fpd-calendar__header {
	margin-bottom: 12px;
}

/* ============================================================
 * Weekly grid (Mon → Sun) on the dashboard.
 * ============================================================ */

.fpd-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
}

/* Scroll wrapper around the weekly grid. On desktop it's a no-op
   (the grid already fits its parent); on tablet (481-1024px) it
   becomes a horizontal-scroll container so users can pan through
   the week with the arrow buttons in the section header. */
.fpd-week-scroll {
	overflow: hidden;        /* track itself owns the scroll */
}

.fpd-week-nav {
	display: none;           /* hidden by default; only visible on tablet */
	gap: 6px;
}

/* Tablet view (481-1024px) — convert grid to horizontal scroll list
   with arrow navigation. Each day gets a fixed minimum width so the
   workout title can render legibly. */
@media (min-width: 481px) and (max-width: 1024px) {
	.fpd-week {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;          /* Firefox */
	}
	.fpd-week::-webkit-scrollbar { display: none; }  /* WebKit */

	.fpd-week__day {
		flex: 0 0 auto;
		width: calc((100% - 24px) / 4);  /* 4 days visible at a time */
		min-width: 140px;
		scroll-snap-align: start;
	}

	.fpd-week-nav {
		display: inline-flex;
	}

	.fpd-section__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 12px;
	}
}

.fpd-week__day {
	background: #fff;
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius-s);
	padding: 10px 8px;
	min-height: 110px;
	display: flex;
	flex-direction: column;
}

.fpd-week__day.is-today {
	border-color: var(--fpd-ink);
	background: var(--fpd-soft);
}

.fpd-week__day-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
	border-bottom: 1px solid var(--fpd-border);
	padding-bottom: 6px;
}

.fpd-week__dow {
	font-size: 11px;
	font-weight: 500;
	color: var(--fpd-ink-3);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fpd-week__num {
	font-family: var(--fpd-serif);
	font-size: 16px;
	font-weight: 600;
	color: var(--fpd-ink);
	font-variant-numeric: tabular-nums;
}

.fpd-week__day.is-today .fpd-week__num { color: var(--fpd-ink); }

.fpd-week__empty {
	color: var(--fpd-ink-3);
	font-size: 12px;
	margin: 0;
	text-align: center;
	padding-top: 8px;
}

.fpd-week__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fpd-week__item .fpd-week__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 8px;
	border-radius: 6px;
	background: var(--fpd-soft);
	color: var(--fpd-ink);
	text-decoration: none;
	font-size: 11px;
	line-height: 1.3;
	transition: background .15s;
	border: 0;
	font-family: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
}

.fpd-week__item .fpd-week__link:hover { background: var(--fpd-border); }

.fpd-week__item.is-done .fpd-week__link {
	background: #E1D3BE;
}

.fpd-week__title {
	font-size: 11px;
	font-weight: 600;
	word-break: break-word;
}

.fpd-week__program {
	font-size: 10px;
	color: var(--fpd-ink-3);
}

.fpd-week__check {
	color: var(--fpd-ink, #191919);
	display: inline-flex;
	align-items: center;
}

.fpd-week__title {
	font-weight: 500;
	word-break: break-word;
}

.fpd-week__program {
	font-size: 11px;
	color: var(--fpd-ink-3);
}

/* Phones only — stack the 7-day strip vertically. Tablets keep
   the desktop horizontal layout (7 columns side-by-side). */
@media (max-width: 480px) {
	.fpd-week {
		grid-template-columns: 1fr;
	}
	.fpd-week__day {
		min-height: auto;
		flex-direction: row;
		align-items: center;
		gap: 16px;
	}
	.fpd-week__day-head {
		flex-direction: column;
		border: 0;
		padding: 0;
		margin: 0;
		min-width: 50px;
		text-align: center;
	}
	.fpd-week__list { flex: 1; }
}

/* ============================================================
 * Per-program progress overview (dashboard)
 * ============================================================ */

.fpd-progress-list {
	display: grid;
	gap: 10px;
}

.fpd-progress-card {
	display: flex;
	gap: 14px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--fpd-border);
	border-radius: var(--fpd-radius-s);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, transform .15s;
}

.fpd-progress-card:hover {
	border-color: var(--fpd-ink);
	transform: translateY(-1px);
}

.fpd-progress-card__thumb {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-color: var(--fpd-soft);
}

.fpd-progress-card__body {
	flex: 1;
	min-width: 0;
}

.fpd-progress-card__title {
	font-family: var(--fpd-serif) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	margin: 0 0 6px !important;
	line-height: 1.3 !important;
	color: var(--fpd-ink) !important;
}

.fpd-progress-card__meta {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--fpd-ink-3);
	margin: 6px 0 0;
}

.fpd-progress-card__pct {
	font-weight: 600;
	color: var(--fpd-ink);
}

/* Progress bar (reused: workouts cards, dashboard cards) */
.fpd-progress {
	height: 5px;
	background: var(--fpd-soft);
	border-radius: 999px;
	overflow: hidden;
}

.fpd-progress__bar {
	height: 100%;
	background: var(--fpd-ink);
	border-radius: inherit;
	transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
 * Watched-state on video cards (workouts page)
 * ============================================================ */

.fpd-video__title-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fpd-video__check {
	display: none;
	color: var(--fpd-success);
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
}

.fpd-video.is-watched .fpd-video__check { display: inline-flex; }

.fpd-video.is-watched {
	border-color: rgba(58, 125, 90, .3);
}

.fpd-video__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.fpd-iconbtn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--fpd-border);
	border-radius: 999px;
	background: #fff;
	color: var(--fpd-ink-2);
	font-size: 12.5px;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}

.fpd-iconbtn:hover { border-color: var(--fpd-ink); color: var(--fpd-ink); }

.fpd-iconbtn--add svg { color: var(--fpd-ink); }
.fpd-iconbtn--ghost { color: var(--fpd-ink-3); }

/* ============================================================
 * Calendar click affordances
 * ============================================================ */

.fpd-calendar__cell.is-clickable {
	cursor: pointer;
	transition: background .12s;
}

.fpd-calendar__cell.is-clickable:hover {
	background: var(--fpd-soft);
}

.fpd-calendar__item {
	display: block;
	width: 100%;
	text-align: left;
	background: #E1D3BE;
	color: var(--fpd-ink, #191919);
	border: 0;
	border-radius: 4px;
	padding: 3px 6px;
	font-size: 11px;
	cursor: pointer;
	margin-top: 3px;
}

.fpd-calendar__item.is-done {
	background: #d4c2a5;
}

.fpd-calendar__item:hover { filter: brightness(.94); }

/* ============================================================
 * Modal (used by Workouts page and Calendar page)
 * ============================================================ */

.fpd-modal[hidden] { display: none !important; }

.fpd-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.fpd-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(25, 25, 25, .55);
	backdrop-filter: blur(2px);
}

.fpd-modal__panel {
	position: relative;
	background: #fff;
	border-radius: var(--fpd-radius);
	padding: 28px 24px 20px;
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 24px 64px -16px rgba(0,0,0,.35);
}

.fpd-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	border: 0;
	background: transparent;
	font-size: 22px;
	color: var(--fpd-ink-3);
	cursor: pointer;
	line-height: 1;
}

.fpd-modal__close:hover { color: var(--fpd-ink); }

.fpd-modal__title {
	font-family: var(--fpd-serif) !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	margin: 0 0 4px !important;
	color: var(--fpd-ink) !important;
	line-height: 1.3 !important;
}

.fpd-modal__sub {
	font-size: 13.5px;
	color: var(--fpd-ink-3);
	margin: 0 0 18px;
}

.fpd-modal__label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	margin: 10px 0 4px;
	color: var(--fpd-ink-2);
}

.fpd-modal__panel input,
.fpd-modal__panel select {
	width: 100%;
	padding: 9px 12px;
	border: 1.5px solid var(--fpd-border);
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--fpd-ink);
}

.fpd-modal__panel input:focus,
.fpd-modal__panel select:focus {
	outline: none;
	border-color: var(--fpd-ink);
}

.fpd-modal__error {
	margin-top: 12px;
	padding: 8px 12px;
	background: #fbe9e9;
	color: var(--fpd-danger);
	border-radius: 6px;
	font-size: 13px;
}

.fpd-modal__actions {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.fpd-btn--danger {
	background: var(--fpd-danger);
	color: #fff;
	border: 0;
}

body.fpd-no-scroll { overflow: hidden; }

/* ============================================================
 * Calendar item with inline × delete button.
 * Wrapper makes the × overlap the right edge of the workout link.
 * ============================================================ */

.fpd-calendar__item-wrap {
	position: relative;
	margin-top: 3px;
}

/* Item is a <button> now (opens the lightbox); keeps the same visual
   treatment as the previous anchor.  Beige bg / ink text per design. */
.fpd-calendar__item-wrap .fpd-calendar__item {
	display: block;
	width: 100%;
	text-align: left;
	background: #E1D3BE;           /* brand beige */
	color: var(--fpd-ink, #191919); /* dark text */
	border: 0;
	border-radius: 4px;
	padding: 3px 22px 3px 6px;     /* extra right padding for the × button */
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
	font-family: inherit;
	cursor: pointer;
	transition: filter .15s, background .15s;
	box-sizing: border-box;
}

.fpd-calendar__item-wrap .fpd-calendar__item:hover { filter: brightness(.94); }

/* Completed: same beige, but inset green check via ::before. Keeps the
   dominant color consistent with the brand and only signals "done"
   subtly through the leading checkmark. */
.fpd-calendar__item-wrap .fpd-calendar__item.is-done {
	background: #d4c2a5;            /* slightly deeper beige */
}
.fpd-calendar__item-wrap .fpd-calendar__item.is-done::before {
	content: "✓ ";
	font-weight: 700;
	color: var(--fpd-ink, #191919);
}

.fpd-calendar__del {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--fpd-ink, #191919);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;                  /* hidden by default — appears on hover/focus */
	transition: opacity .15s, background .15s;
}

.fpd-calendar__item-wrap:hover .fpd-calendar__del,
.fpd-calendar__del:focus {
	opacity: 1;
	background: rgba(25, 25, 25, .12);
}

/* On touch devices the hover state never triggers, so make the × always
   visible there. Slight opacity so it doesn't shout. */
@media (hover: none) {
	.fpd-calendar__del {
		opacity: .7;
		background: rgba(25, 25, 25, .08);
	}
}

/* When a program card is expanded inside the grid, span both columns
   so the videos breathe instead of squeezing one column at full height. */
@media (min-width: 721px) {
	.fpd-programs .fpd-program[open] {
		grid-column: 1 / -1;
	}
}

/* Brief highlight when a video card is reached via deep-link from the
   calendar / dashboard. Helps the user spot where they just landed. */
.fpd-video.fpd-flash,
.fpd-program.fpd-flash {
	animation: fpd-flash 1.6s ease;
}

@keyframes fpd-flash {
	0%   { box-shadow: 0 0 0 0 rgba(225, 211, 190, 0); }
	30%  { box-shadow: 0 0 0 4px rgba(225, 211, 190, .8); }
	100% { box-shadow: 0 0 0 0 rgba(225, 211, 190, 0); }
}

/* When scrolling to a video card, push it slightly down from the top of
   the viewport so it's not flush against the page header. */
.fpd-video {
	scroll-margin-top: 80px;
}

/* Inline empty state inside a section (lighter than the standalone .fpd-empty) */
.fpd-empty--inline {
	background: var(--fpd-soft);
	border: 1px dashed var(--fpd-border);
	border-radius: var(--fpd-radius);
	padding: 20px;
	text-align: center;
}

.fpd-empty--inline p {
	color: var(--fpd-ink-2);
	margin: 0 0 12px;
}

/* Admin-only diagnostic block. Yellow tinted to distinguish from regular UI. */
.fpd-admin-debug {
	margin-top: 18px;
	padding: 14px 16px;
	background: #fff8e5;
	border: 1px solid #e8d796;
	border-radius: var(--fpd-radius-s);
	font-size: 13px;
	color: #5a4a1a;
}

.fpd-admin-debug ul {
	margin: 8px 0;
	padding-left: 20px;
}

.fpd-admin-debug li {
	margin: 4px 0;
}

.fpd-admin-debug code {
	background: rgba(0,0,0,.06);
	padding: 1px 6px;
	border-radius: 3px;
	font-family: ui-monospace, monospace;
	font-size: 12px;
}

.fpd-admin-debug__note {
	margin: 8px 0 0;
	font-size: 11.5px;
	color: #8a7a3a;
	font-style: italic;
}

/* ============================================================
 * Sidebar greeting (above the My Account menu nav)
 * ============================================================ */
.fpd-sidebar-hello {
	padding: 16px 20px 14px;
	border-bottom: 1px solid var(--fpd-border, rgba(25,25,25,.10));
	margin-bottom: 12px;
	background: var(--fpd-soft, #F5F1ED);
	border-radius: var(--fpd-radius-s, 8px);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fpd-sidebar-hello__label {
	font-size: 11.5px;
	color: var(--fpd-ink-3, #888);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.fpd-sidebar-hello__name {
	font-family: var(--fpd-serif, "Geologica");
	font-size: 16px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
	word-break: break-word;
}

/* ============================================================
 * Progress bar — bezzed-out brand color
 * ============================================================ */
.fpd-progress {
	height: 6px;
	background: rgba(25,25,25,.07);
	border-radius: 999px;
	overflow: hidden;
}
.fpd-progress__bar {
	height: 100%;
	background: #E1D3BE;          /* brand tan accent */
	border-radius: inherit;
	transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
 * Flat program block (Τα προγράμματα μου + Αγαπημένα)
 * Wrapped in a soft beige card so the section feels self-contained.
 * ============================================================ */
.fpd-program-block {
	margin: 0 0 32px;
	background: var(--fpd-soft, #F5F1ED);
	border-radius: var(--fpd-radius, 12px);
	padding: 28px 28px 32px;
}
.fpd-program-block:last-child { margin-bottom: 0; }

.fpd-program-block__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 4px;
	flex-wrap: wrap;
}

/* Eyebrow + title grouped on the left side of the header. */
.fpd-program-block__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.fpd-program-block__eyebrow {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
	margin: 0;
	font-weight: 500;
}
.fpd-program-block__title {
	font-family: var(--fpd-serif, "Geologica") !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--fpd-ink, #191919) !important;
	margin: 0 !important;
	line-height: 1.15 !important;
}
.fpd-program-block__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--fpd-ink-3, #888);
	margin: 4px 0 6px;
}
.fpd-program-block__count {
	font-variant-numeric: tabular-nums;
}

/* Count badge (e.g. "7 videos") shown on the right of the section head */
.fpd-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: #fff;
	color: var(--fpd-ink, #191919);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.fpd-btn--sm {
	padding: 6px 12px;
	font-size: 13px;
	gap: 6px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================
 * Video card grid (4 cols → 2 → 1 responsive)
 * ============================================================ */
.fpd-video-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 20px;
}
@media (max-width: 1100px) { .fpd-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .fpd-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .fpd-video-grid { grid-template-columns: 1fr; } }

.fpd-video-card {
	background: #fff;
	border-radius: var(--fpd-radius, 12px);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
}
.fpd-video-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Thumb / player area — keeps 16:9 even when empty */
.fpd-video-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--fpd-soft, #F5F1ED) center/cover no-repeat;
	border-radius: var(--fpd-radius-s, 10px);
	border: 0;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	display: block;
	text-decoration: none;
}
.fpd-video-card__brand {
	position: absolute;
	left: 12px;
	bottom: 10px;
	color: #fff;
	font-family: var(--fpd-serif, "Geologica");
	font-size: 11.5px;
	letter-spacing: .03em;
	text-shadow: 0 1px 2px rgba(0,0,0,.4);
	font-style: italic;
}
.fpd-video-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform .15s;
	display: inline-flex;
}
.fpd-video-card__thumb:hover .fpd-video-card__play {
	transform: translate(-50%, -50%) scale(1.08);
}
.fpd-video-card__done {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #E1D3BE;     /* brand tan/beige */
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* Active player (replaces thumb after click) */
.fpd-video-card__player {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--fpd-radius-s, 10px);
	overflow: hidden;
}
.fpd-video-card__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.fpd-video-card__body {
	padding: 10px 4px 4px;
}
.fpd-video-card__eyebrow {
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
	margin: 0 0 4px;
	font-weight: 500;
}
.fpd-video-card__row {
	display: flex;
	gap: 10px;
	justify-content: space-between;
	align-items: flex-start;
}
.fpd-video-card__title {
	font-family: var(--fpd-serif, "Geologica") !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--fpd-ink, #191919) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	flex: 1;
	min-width: 0;
	word-break: break-word;
}
.fpd-video-card__actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.fpd-iconbtn--icon {
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--fpd-border, rgba(25,25,25,.10));
	background: #fff;
	color: var(--fpd-ink-3, #888);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}
.fpd-iconbtn--icon:hover { color: var(--fpd-ink, #191919); border-color: var(--fpd-ink, #191919); }
.fpd-iconbtn--icon.is-fav { color: #b54141; border-color: #b54141; }

.fpd-video-card__undo {
	background: transparent;
	border: 0;
	padding: 6px 0 0;
	color: var(--fpd-ink-3, #888);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.fpd-video-card__undo:hover { color: var(--fpd-ink, #191919); }

/* ============================================================
 * Section header with right-aligned controls (carousel nav)
 * ============================================================ */
.fpd-section__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.fpd-section__row .fpd-section__title { margin: 0; }

.fpd-carousel__nav {
	display: flex;
	gap: 4px;
}

/* ============================================================
 * Carousel of unwatched videos (Dashboard "Συνέχισε")
 * ============================================================ */
.fpd-carousel {
	overflow: hidden;
	margin: 0 -4px;
}
.fpd-carousel__track {
	display: flex;
	gap: 16px;
	padding: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
}
.fpd-carousel__track::-webkit-scrollbar { display: none; }   /* Safari/Chrome */

.fpd-carousel__card {
	flex: 0 0 240px;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 0;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.fpd-carousel__thumb {
	aspect-ratio: 16 / 9;
	background: var(--fpd-soft, #F5F1ED) center/cover no-repeat;
	border-radius: var(--fpd-radius-s, 10px);
	position: relative;
	overflow: hidden;
	transition: transform .15s;
}
.fpd-carousel__card:hover .fpd-carousel__thumb { transform: translateY(-2px); }
.fpd-carousel__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
.fpd-carousel__program {
	font-size: 11px;
	color: var(--fpd-ink-3, #888);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 4px 0 0;
}
.fpd-carousel__title {
	font-family: var(--fpd-serif, "Geologica");
	font-size: 14.5px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
	margin: 0;
	line-height: 1.3;
}

/* ============================================================
 * Defensive: hide the default WC "Γεια σας {user}... Από τον πίνακα..."
 * intro if some theme override re-renders it despite our remove_action.
 * WC wraps this in <p>...</p> elements directly inside the
 * woocommerce-MyAccount-content container BEFORE any other content.
 * ============================================================ */
.woocommerce-MyAccount-content > p.woocommerce-MyAccount-message,
.woocommerce-MyAccount-content > p.hello,
.woocommerce-MyAccount-content > .woocommerce-MyAccount-content-wrapper > p.hello {
	display: none !important;
}

/* If the theme prints the bare paragraph without a class — match by
   first-child position. Be careful: this only hits paragraphs that come
   BEFORE our .fpd-dash wrapper. */
.woocommerce-MyAccount-content > p:first-of-type:has(+ .fpd-dash),
.woocommerce-MyAccount-content > p:nth-of-type(1):has(~ .fpd-dash),
.woocommerce-MyAccount-content > p:nth-of-type(2):has(~ .fpd-dash) {
	display: none !important;
}

/* ============================================================
 * Lightbox for video playback (fullscreen modal)
 * ============================================================ */
.fpd-lightbox[hidden] { display: none !important; }

.fpd-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.fpd-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15,15,15,.85);
	backdrop-filter: blur(3px);
}

.fpd-lightbox__panel {
	position: relative;
	background: #000;
	border-radius: var(--fpd-radius, 12px);
	max-width: 1100px;
	width: 100%;
	max-height: 92vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}

.fpd-lightbox__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: 0;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-size: 22px;
	border-radius: 50%;
	cursor: pointer;
	line-height: 1;
	z-index: 2;
}
.fpd-lightbox__close:hover { background: rgba(0,0,0,.85); }

.fpd-lightbox__player {
	aspect-ratio: 16 / 9;
	width: 100%;
	background: #000;
}
.fpd-lightbox__player iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.fpd-lightbox__meta {
	padding: 14px 20px 18px;
	background: #fff;
}
.fpd-lightbox__eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
}
.fpd-lightbox__title {
	margin: 0;
	font-family: var(--fpd-serif, "Geologica");
	font-size: 18px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
}

/* ============================================================
 * Day-of-week row (program schedule modal)
 * ============================================================ */
.fpd-dow-row {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-top: 6px;
}
.fpd-dow {
	padding: 10px 4px;
	border: 1.5px solid var(--fpd-border, rgba(25,25,25,.10));
	border-radius: 8px;
	background: #fff;
	color: var(--fpd-ink-2, #4D4D4D);
	font-size: 13px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: background .12s, color .12s, border-color .12s;
}
.fpd-dow:hover:not(:disabled) {
	border-color: var(--fpd-ink, #191919);
	color: var(--fpd-ink, #191919);
}
.fpd-dow.is-on {
	background: var(--fpd-ink, #191919);
	color: #fff;
	border-color: var(--fpd-ink, #191919);
}
.fpd-dow.is-disabled {
	opacity: .35;
	cursor: not-allowed;
}

.fpd-modal__hint {
	font-size: 12px;
	color: var(--fpd-ink-3, #888);
	margin: 0 0 6px;
}

/* ============================================================
 * Inline mini-calendar inside schedule modals
 * Greek labels, Monday-first. Pure CSS picker.
 * ============================================================ */
.fpd-mini-cal {
	margin: 14px 0 6px;
	background: var(--fpd-soft, #F5F1ED);
	border-radius: 10px;
	padding: 12px;
}

.fpd-mini-cal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	gap: 8px;
}
.fpd-mini-cal__label {
	font-family: var(--fpd-serif, "Geologica");
	font-size: 14.5px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
	flex: 1;
	text-align: center;
}
.fpd-mini-cal__nav {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: var(--fpd-ink, #191919);
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
	flex-shrink: 0;
}
.fpd-mini-cal__nav:hover {
	background: var(--fpd-ink, #191919);
	color: #fff;
}

.fpd-mini-cal__wd {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	margin-bottom: 4px;
	text-align: center;
	font-size: 10.5px;
	color: var(--fpd-ink-3, #888);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.fpd-mini-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.fpd-mini-cal__day {
	aspect-ratio: 1;
	border: 0;
	background: transparent;
	color: var(--fpd-ink, #191919);
	font-family: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	border-radius: 8px;
	cursor: pointer;
	transition: background .12s, color .12s;
}
.fpd-mini-cal__day:hover:not(:disabled):not(.is-outside) {
	background: rgba(25,25,25,.08);
}
.fpd-mini-cal__day.is-outside {
	color: rgba(25,25,25,.20);
	cursor: default;
}
.fpd-mini-cal__day.is-past {
	color: rgba(25,25,25,.30);
	cursor: not-allowed;
}
.fpd-mini-cal__day.is-today {
	font-weight: 700;
	box-shadow: inset 0 0 0 1.5px var(--fpd-ink, #191919);
}
.fpd-mini-cal__day.is-selected {
	background: var(--fpd-ink, #191919);
	color: #fff;
	font-weight: 600;
}
.fpd-mini-cal__day.is-selected.is-today {
	box-shadow: none;
}

/* ============================================================
 * Program-block heading variant with eyebrow + title stacked
 * (used in the Favourites section, and could also be added to
 * the Workouts page's program sections).
 * ============================================================ */
.fpd-program-block__heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fpd-program-block__eyebrow {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
	font-weight: 500;
	margin: 0;
}

/* ============================================================
 * Count badge (rounded chip used as "X videos" indicator)
 * ============================================================ */
.fpd-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--fpd-soft, #F5F1ED);
	color: var(--fpd-ink, #191919);
	font-size: 12.5px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Tighter padding on small screens — the 28px gutter eats too much space. */
@media (max-width: 640px) {
	.fpd-program-block {
		padding: 20px 16px 24px;
	}
	.fpd-program-block__title {
		font-size: 22px;
	}
}

/* ============================================================
 * "Ο λογαριασμός μου" — card-based layout
 * ============================================================ */
.fpd-account {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fpd-account-card {
	background: var(--fpd-soft, #F5F1ED);
	border-radius: var(--fpd-radius, 12px);
	padding: 24px 28px 24px;
}

.fpd-account-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	gap: 12px;
	flex-wrap: wrap;
}
.fpd-account-card__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.fpd-account-card__eyebrow {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
	margin: 0;
	font-weight: 500;
}
.fpd-account-card__title {
	font-family: var(--fpd-serif, "Geologica") !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--fpd-ink, #191919) !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}

.fpd-account-card__body {
	margin: 0 0 16px;
	color: var(--fpd-ink-2, #4D4D4D);
	font-size: 14px;
	line-height: 1.55;
}
.fpd-account-card__body--muted {
	color: var(--fpd-ink-3, #888);
}

.fpd-account-card__list {
	margin: 0 0 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fpd-account-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--fpd-border, rgba(25,25,25,.08));
}
.fpd-account-card__row:last-child { border-bottom: 0; }
.fpd-account-card__row dt {
	color: var(--fpd-ink-3, #888);
	font-size: 13px;
	margin: 0;
}
.fpd-account-card__row dd {
	color: var(--fpd-ink, #191919);
	font-size: 14px;
	font-weight: 500;
	margin: 0;
	text-align: right;
	word-break: break-word;
}

.fpd-account-card__foot {
	margin-top: 4px;
}
.fpd-account-card__foot--row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Danger zone variant */
.fpd-account-card--danger {
	background: rgba(181, 65, 65, .06);
	border: 1px solid rgba(181, 65, 65, .15);
}
.fpd-account-card--danger .fpd-account-card__eyebrow {
	color: #b54141;
}
.fpd-account-card--danger .fpd-account-card__title {
	color: #b54141;
}

.fpd-btn--danger {
	background: #b54141;
	color: #fff;
	border: 0;
	padding: 10px 18px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
}
.fpd-btn--danger:hover { background: #9a3535; }

/* Active access list */
.fpd-access-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fpd-access-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff;
	border-radius: 8px;
	font-size: 14px;
	color: var(--fpd-ink, #191919);
}
.fpd-access-row__name {
	font-weight: 600;
}
.fpd-access-row__sep {
	color: var(--fpd-ink-3, #aaa);
	user-select: none;
}
.fpd-access-row__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fpd-ink-2, #4D4D4D);
}
.fpd-access-row__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3a7d5a;
	display: inline-block;
}
.fpd-access-row__expiry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--fpd-ink-2, #4D4D4D);
}

@media (max-width: 640px) {
	.fpd-account-card { padding: 20px 18px; }
	.fpd-account-card__title { font-size: 20px; }
	.fpd-account-card__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.fpd-account-card__row dd { text-align: left; }
}

/* ============================================================
 * Account-page button overrides — all buttons solid dark so they
 * read clearly against the soft beige card backgrounds.
 * ============================================================ */
.fpd-account .fpd-btn--ghost,
.fpd-account .fpd-btn--primary {
	background: var(--fpd-tan, #E1D3BE);
	color: var(--fpd-ink, #191919);
	border: 0;
	padding: 10px 18px;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, transform .15s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(225, 211, 190, .35);
}
.fpd-account .fpd-btn--ghost:hover,
.fpd-account .fpd-btn--primary:hover {
	background: var(--fpd-ink, #191919);
	color: #fff;
	transform: translateY(-1px);
}

/* The danger-zone button keeps its red treatment, even though it
   technically lives inside .fpd-account. The selector specificity below
   wins over the override above. */
.fpd-account .fpd-btn--danger {
	background: #b54141;
}
.fpd-account .fpd-btn--danger:hover {
	background: #9a3535;
}

/* ============================================================
 * Custom orders table (/my-account/orders/)
 * ============================================================ */
.fpd-orders {
	background: var(--fpd-soft, #F5F1ED);
	border-radius: var(--fpd-radius, 12px);
	padding: 14px;
}

.fpd-orders__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: transparent;
}

.fpd-orders__table thead th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--fpd-ink-3, #888);
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 10px 14px;
	border-bottom: 1px solid var(--fpd-border, rgba(25,25,25,.10));
	background: transparent;
}

.fpd-orders__table tbody tr {
	background: #fff;
}
.fpd-orders__table tbody tr + tr td {
	border-top: 6px solid var(--fpd-soft, #F5F1ED);
}
.fpd-orders__table tbody td {
	padding: 14px;
	color: var(--fpd-ink, #191919);
	vertical-align: middle;
}
.fpd-orders__table tbody tr td:first-child {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}
.fpd-orders__table tbody tr td:last-child {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.fpd-orders__program {
	font-weight: 600;
}
.fpd-orders__total-col {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.fpd-orders__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}
.fpd-orders__status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	display: inline-block;
}
.fpd-orders__status--active {
	background: rgba(58, 125, 90, .12);
	color: #2d6147;
}
.fpd-orders__status--active::before {
	background: #3a7d5a;
}
.fpd-orders__status--expired {
	background: rgba(25, 25, 25, .08);
	color: var(--fpd-ink-3, #888);
}
.fpd-orders__status--expired::before {
	background: var(--fpd-ink-3, #888);
}

/* Mobile: stack cells using data-label fallback */
@media (max-width: 720px) {
	.fpd-orders__table thead { display: none; }
	.fpd-orders__table, .fpd-orders__table tbody, .fpd-orders__table tr, .fpd-orders__table td {
		display: block;
		width: 100%;
	}
	.fpd-orders__table tbody tr {
		margin-bottom: 10px;
		border-radius: 10px;
		padding: 6px;
	}
	.fpd-orders__table tbody tr + tr td {
		border-top: 0;
	}
	.fpd-orders__table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 8px 10px;
		border-radius: 0 !important;
	}
	.fpd-orders__table td::before {
		content: attr(data-label);
		font-size: 11.5px;
		font-weight: 600;
		text-transform: uppercase;
		color: var(--fpd-ink-3, #888);
		letter-spacing: .06em;
	}
	.fpd-orders__total-col {
		text-align: right;
	}
}

/* ============================================================
 * WC My Account default-page headings — the theme renders these
 * with the same outsized type as page H1s. We override anywhere
 * the WC content area shows an H3 (Edit Address card title,
 * Edit-Address form title, order details sections, etc.)
 * ============================================================ */
.woocommerce-account .woocommerce-Address h3,
.woocommerce-account .woocommerce-MyAccount-content > h3,
.woocommerce-account .woocommerce-MyAccount-content form > h3,
.woocommerce-account .woocommerce-column__title {
	font-size: 18px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
	margin: 0 0 12px !important;
	letter-spacing: 0 !important;
	color: var(--fpd-ink, #191919) !important;
}

/* ============================================================
 * /my-account/edit-address/ — shrink the heading
 * Themes love to apply 50-60px font-size to every heading in main
 * content (Elementor especially does this). We blast every heading
 * inside the My Account content container down to a sane size and
 * use very specific selectors so we win the cascade.
 * ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content h1,
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-MyAccount-content h4,
body.woocommerce-account .woocommerce-MyAccount-content header h1,
body.woocommerce-account .woocommerce-MyAccount-content header h2,
body.woocommerce-account .woocommerce-MyAccount-content header h3,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h1,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h4,
body.woocommerce-account .woocommerce-MyAccount-content .entry-title {
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* The address body text — name, street, zip — also tends to be larger
   than necessary in most themes. Bring it down to standard reading size. */
body.woocommerce-account .woocommerce-Address address {
	font-size: 14px !important;
	line-height: 1.55 !important;
	font-style: normal !important;
	letter-spacing: 0 !important;
}

/* Subdue the "Edit your billing address" link so it doesn't compete with
   the heading. */
body.woocommerce-account .woocommerce-Address-title .edit {
	font-size: 13px !important;
	font-weight: 500 !important;
}

/* ============================================================
 * Cart + Checkout adjustments
 * ============================================================ */

/* Hide the "× 1" quantity in the checkout review order — only one of
   each program can be bought, so showing quantity is just noise. */
.woocommerce-checkout-review-order-table .product-quantity,
.woocommerce-cart-form .product-quantity {
	display: none !important;
}

/* Some themes put the quantity inline inside the product name as
   <strong class="product-quantity">. Catch that variant too. */
.woocommerce-checkout-review-order-table td.product-name .product-quantity,
.woocommerce-checkout-review-order-table td.product-name strong.product-quantity {
	display: none !important;
}

/* Hide the "Υποσύνολο" row from the totals box on cart + checkout.
   Discounts (.cart-discount) and shipping / total still show normally. */
.woocommerce-cart .cart_totals tr.cart-subtotal,
.woocommerce-checkout #order_review tr.cart-subtotal,
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart-subtotal {
	display: none !important;
}

/* The "Πρόσβαση: X εβδομάδες" meta WC renders below the product name
   uses a <dl class="variation">. Give it brand styling. */
.woocommerce-checkout-review-order-table .product-name dl.variation,
.woocommerce-cart-form .product-name dl.variation {
	margin: 4px 0 0;
	padding: 0;
	font-size: 12.5px;
	color: var(--fpd-ink-3, #888);
}
.woocommerce-checkout-review-order-table .product-name dl.variation dt,
.woocommerce-cart-form .product-name dl.variation dt {
	font-weight: 500;
	display: inline;
	margin-right: 4px;
}
.woocommerce-checkout-review-order-table .product-name dl.variation dt::after {
	content: ":";
}
.woocommerce-checkout-review-order-table .product-name dl.variation dd,
.woocommerce-cart-form .product-name dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 600;
	color: var(--fpd-ink-2, #4D4D4D);
}
.woocommerce-checkout-review-order-table .product-name dl.variation dd p,
.woocommerce-cart-form .product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

/* ============================================================
 * "Πρόσθεσε στο ημερολόγιο" program-level button
 * Solid dark so it's clearly visible against the beige program
 * container background. Has a calendar icon prefix.
 * ============================================================ */
.fpd-add-program-btn {
	background: var(--fpd-tan, #E1D3BE) !important;
	color: var(--fpd-ink, #191919) !important;
	border: 0 !important;
	padding: 9px 16px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer;
	transition: background .15s, transform .15s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(225, 211, 190, .35);
}
.fpd-add-program-btn:hover {
	background: var(--fpd-ink, #191919) !important;
	color: #fff !important;
	transform: translateY(-1px);
}
.fpd-add-program-btn svg {
	flex-shrink: 0;
}

/* ============================================================
 * Mobile navigation — stack tabs vertically with equal height
 *
 * On the desktop, the My Account menu is a vertical sidebar. On mobile,
 * many themes collapse it into a 2-column grid which looks chaotic
 * because tabs with 2-line labels ("Τα προγράμματα μου", "Ο λογαριασμός
 * μου") stretch their grid row and break alignment with neighbours.
 *
 * We force a single-column stack on small screens, with consistent
 * padding/height and a clear active state. Selectors are very specific
 * and use !important to win the cascade against theme overrides.
 * ============================================================ */
@media (max-width: 768px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation {
		float: none !important;
		width: 100% !important;
		margin: 0 0 20px !important;
		padding: 0 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		display: flex !important;
		flex-direction: column !important;
		gap: 6px !important;
		padding: 0 !important;
		margin: 0 !important;
		list-style: none !important;
		grid-template-columns: none !important; /* defeat grid-based themes */
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		background: transparent !important;
		border: 0 !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li::before,
	body.woocommerce-account .woocommerce-MyAccount-navigation ul li::after {
		display: none !important; /* defeat theme bullet markers */
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 48px !important;
		padding: 12px 18px !important;
		background: var(--fpd-soft, #F5F1ED) !important;
		color: var(--fpd-ink, #191919) !important;
		border: 0 !important;
		border-radius: 10px !important;
		text-decoration: none !important;
		font-family: inherit !important;
		font-size: 14.5px !important;
		font-weight: 500 !important;
		line-height: 1.3 !important;
		white-space: normal !important;          /* allow wrap if needed */
		box-sizing: border-box !important;
		transition: background .15s, color .15s !important;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
		background: rgba(25, 25, 25, .08) !important;
	}

	/* Active state — WooCommerce flags the current endpoint with
	   .is-active on the <li>. Some themes use .woocommerce-MyAccount-
	   navigation-link--{slug}.is-active. */
	body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
	body.woocommerce-account .woocommerce-MyAccount-navigation ul li.current-menu-item a,
	body.woocommerce-account .woocommerce-MyAccount-navigation ul li.active a {
		background: var(--fpd-ink, #191919) !important;
		color: #fff !important;
	}

	/* The "Καλώς ήρθες, [όνομα]" greeting card stacks above the nav. Give
	   it the same width and spacing so it doesn't look orphaned. */
	body.woocommerce-account .fpd-sidebar-hello {
		margin: 0 0 14px !important;
		padding: 14px 18px !important;
	}
}

/* Even tighter on very small screens — phones in portrait */
@media (max-width: 480px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		font-size: 14px !important;
		padding: 11px 16px !important;
		min-height: 44px !important;
	}
}

/* ============================================================
 * Custom Thank You page
 *
 * Rendered at /checkout/order-received/ via the FPD_Thankyou template
 * override. The layout: welcome intro → per-program access card →
 * features list → CTA → login note for guests.
 * ============================================================ */
.fpd-thankyou {
	max-width: 640px;
	margin: 0 auto;
	padding: 32px 20px;
	color: var(--fpd-ink, #191919);
	font-family: var(--fpd-serif, "Geologica", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif);
}

/* Force every text element inside the thank-you block to share the
   same font. Themes often apply a decorative font to h1/h2 and a
   different one to p, which makes the page look mismatched. */
.fpd-thankyou,
.fpd-thankyou h1,
.fpd-thankyou h2,
.fpd-thankyou h3,
.fpd-thankyou h4,
.fpd-thankyou p,
.fpd-thankyou span,
.fpd-thankyou li,
.fpd-thankyou a {
	font-family: var(--fpd-serif, "Geologica", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif) !important;
}

.fpd-thankyou__intro {
	text-align: center;
	margin-bottom: 28px;
}
.fpd-thankyou__welcome {
	font-size: 26px;
	font-weight: 700;
	margin: 0 0 12px;
	line-height: 1.2;
	color: var(--fpd-ink, #191919);
}
.fpd-thankyou__lede {
	font-size: 15px;
	line-height: 1.55;
	color: var(--fpd-ink-2, #4D4D4D);
	margin: 0;
}

.fpd-thankyou__cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 28px;
}

.fpd-thankyou-card {
	background: var(--fpd-soft, #F5F1ED);
	border-radius: var(--fpd-radius, 12px);
	padding: 22px 24px;
}
.fpd-thankyou-card__eyebrow {
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--fpd-ink-3, #888);
	margin: 0 0 4px;
	font-weight: 500;
}
.fpd-thankyou-card__title {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--fpd-ink, #191919);
	line-height: 1.2;
}
.fpd-thankyou-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.fpd-thankyou-card__meta li {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--fpd-ink, #191919);
}
.fpd-thankyou-card__icon {
	flex-shrink: 0;
	width: 18px;
	display: inline-block;
}
.fpd-thankyou-card__label {
	color: var(--fpd-ink-2, #4D4D4D);
}
.fpd-thankyou-card__value {
	font-weight: 600;
	color: var(--fpd-ink, #191919);
}

.fpd-thankyou__features {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.fpd-thankyou__features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	color: var(--fpd-ink, #191919);
	line-height: 1.4;
}
.fpd-thankyou__check {
	color: #3a7d5a;
	font-weight: 700;
	flex-shrink: 0;
	width: 16px;
	display: inline-block;
	text-align: center;
}

.fpd-thankyou__cta {
	text-align: center;
	margin-bottom: 18px;
}
.fpd-thankyou__btn {
	display: inline-block;
	padding: 14px 32px;
	background: var(--fpd-ink, #191919);
	color: #fff !important;
	text-decoration: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	transition: background .15s, transform .15s;
}
.fpd-thankyou__btn:hover {
	background: #000;
	transform: translateY(-1px);
	color: #fff !important;
}

.fpd-thankyou__note {
	text-align: center;
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--fpd-ink-3, #888);
}
.fpd-thankyou__note a {
	color: var(--fpd-ink, #191919);
	text-decoration: underline;
}

/* Hide WC's default order-received content. Targets all the markup
   WC emits (overview table, order details, customer details) plus the
   "Thank you" notice. We add .fpd-thankyou-active to the body so we
   only hit the order-received page. */
body.fpd-thankyou-active .woocommerce-thankyou-order-received,
body.fpd-thankyou-active .woocommerce-order > .woocommerce-thankyou-order-received,
body.fpd-thankyou-active .woocommerce-order > .woocommerce-order-overview,
body.fpd-thankyou-active .woocommerce-order > .woocommerce-thankyou-order-details,
body.fpd-thankyou-active .woocommerce-order-details,
body.fpd-thankyou-active .woocommerce-order-overview,
body.fpd-thankyou-active .woocommerce-customer-details,
body.fpd-thankyou-active ul.order_details,
body.fpd-thankyou-active section.woocommerce-order-details,
body.fpd-thankyou-active section.woocommerce-customer-details {
	display: none !important;
}

/* Some themes wrap the whole order block in .woocommerce-order — we
   keep that visible (our custom block sits inside it) but hide every
   *direct* child except our custom block. Belt and braces. */
body.fpd-thankyou-active .woocommerce-order > *:not(.fpd-thankyou):not(script):not(style) {
	display: none !important;
}

/* Mobile tightening */
@media (max-width: 640px) {
	.fpd-thankyou { padding: 24px 16px; }
	.fpd-thankyou__welcome { font-size: 22px; }
	.fpd-thankyou-card { padding: 18px 18px; }
	.fpd-thankyou-card__title { font-size: 20px; }
	.fpd-thankyou-card__meta li { flex-wrap: wrap; }
}

/* ============================================================
 * Checkout page styling
 *
 * Brings the WooCommerce checkout in line with the dashboard +
 * thank-you brand: soft beige containers, ink black CTA, rounded
 * inputs, Geologica typography.
 *
 * Scoped to `body.woocommerce-checkout:not(.fpd-thankyou-active)`
 * so it never bleeds into the order-received page, which already
 * has its own custom block.
 * ============================================================ */

body.woocommerce-checkout:not(.fpd-thankyou-active) {
	font-family: var(--fpd-serif, "Geologica", -apple-system, BlinkMacSystemFont, sans-serif);
}

/* ── Section headings ──────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) #customer_details h3,
body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review_heading,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-billing-fields h3,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-shipping-fields h3,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-additional-fields h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--fpd-ink, #191919) !important;
	margin: 0 0 18px !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
}

/* ── Billing / additional fields card ──────────────────────── */
/* No background, no padding, no border — let the fields sit flat as
   in the Elementor layout. Just keep some space between sections. */
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-billing-fields,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-additional-fields {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin-bottom: 14px;
}

/* ── Form rows + labels ────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row {
	margin-bottom: 14px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row label {
	font-size: 13px !important;
	color: var(--fpd-ink-2, #4D4D4D) !important;
	margin-bottom: 6px !important;
	font-weight: 500 !important;
	display: block !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row .required {
	color: #b54141 !important;
	text-decoration: none !important;
}

/* ── Inputs ────────────────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input[type="text"],
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input[type="email"],
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input[type="tel"],
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input[type="number"],
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input[type="password"],
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row select,
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row textarea,
body.woocommerce-checkout:not(.fpd-thankyou-active) .select2-container .select2-selection--single {
	background: #fff !important;
	border: 1px solid rgba(25, 25, 25, .12) !important;
	border-radius: 8px !important;
	padding: 11px 14px !important;
	font-size: 14px !important;
	color: var(--fpd-ink, #191919) !important;
	height: auto !important;
	min-height: 44px !important;
	font-family: inherit !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	line-height: 1.4 !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4 !important;
	padding: 0 !important;
	color: var(--fpd-ink, #191919) !important;
}
body.woocommerce-checkout:not(.fpd-thankyou-active) .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	right: 10px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row input:focus,
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row select:focus,
body.woocommerce-checkout:not(.fpd-thankyou-active) .form-row textarea:focus,
body.woocommerce-checkout:not(.fpd-thankyou-active) .select2-container--focus .select2-selection--single {
	border-color: var(--fpd-ink, #191919) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(25, 25, 25, .06) !important;
}

/* "Δημιουργία λογαριασμού" toggle area (when guests are offered an account) */
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-account-fields {
	margin-top: 8px;
}
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-account-fields .create-account {
	background: #fff;
	padding: 14px 18px;
	border-radius: 8px;
	margin-top: 10px;
}

/* ── Order review (right column) ───────────────────────────── */
/* Container is bare — no background, no padding, no border.
   Wins over Elementor widget wrappers via overflow of overrides. */
body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-checkout-review-order {
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table,
body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .woocommerce-checkout-review-order-table {
	background: transparent !important;
	border: 0 !important;
	border-collapse: collapse !important;
	margin: 0 0 16px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table thead {
	display: none; /* column headers are tweaked by FPD_Checkout; hide on summary */
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table th,
body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table td {
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(25, 25, 25, .08) !important;
	font-size: 14px !important;
	background: transparent !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table tbody td.product-name {
	font-weight: 600;
	color: var(--fpd-ink, #191919);
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table tfoot th {
	font-weight: 500;
	color: var(--fpd-ink-3, #888);
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table tfoot tr.order-total th,
body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table tfoot tr.order-total td {
	border-bottom: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--fpd-ink, #191919) !important;
	padding-top: 16px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review .shop_table tfoot tr.order-total .amount {
	font-weight: 700 !important;
}

/* ── Payment methods ───────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) #payment {
	background: transparent !important;
	margin-top: 14px !important;
	border-radius: 0 !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment ul.wc_payment_methods {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: 0 !important;
	list-style: none !important;
	margin: 0 !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment ul.wc_payment_methods li {
	padding: 8px 0 !important;
	border: 0 !important;
	background: transparent !important;
	list-style: none !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment ul.wc_payment_methods li + li {
	border-top: 1px solid rgba(25, 25, 25, .06) !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment ul.wc_payment_methods li label {
	font-weight: 500 !important;
	color: var(--fpd-ink, #191919) !important;
	font-size: 14px !important;
	cursor: pointer;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment .payment_box {
	background: transparent !important;
	border-radius: 8px !important;
	margin-top: 10px !important;
	padding: 0 !important;
	color: var(--fpd-ink-2, #4D4D4D) !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #payment .payment_box::before {
	display: none !important;
}

/* ── Terms checkbox ────────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-terms-and-conditions-wrapper {
	margin-top: 14px;
}
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-terms-and-conditions-wrapper label {
	font-size: 13px;
	color: var(--fpd-ink-2, #4D4D4D);
}

/* ── Place order button ────────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) #place_order,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-checkout-place-order #place_order {
	background: var(--fpd-ink, #191919) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 14px 32px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	width: 100% !important;
	min-height: 50px !important;
	margin-top: 16px !important;
	cursor: pointer;
	transition: background .15s, transform .15s !important;
	font-family: inherit !important;
	letter-spacing: .01em !important;
	box-shadow: none !important;
	text-shadow: none !important;
	display: block !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #place_order:hover {
	background: #000 !important;
	transform: translateY(-1px);
}

body.woocommerce-checkout:not(.fpd-thankyou-active) #place_order:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

/* ── Coupon area + login prompt at top ─────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-info,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-form-login-toggle,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-form-coupon-toggle {
	background: var(--fpd-soft, #F5F1ED) !important;
	border: 0 !important;
	border-left: 3px solid var(--fpd-tan, #E1D3BE) !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	font-size: 13.5px !important;
	color: var(--fpd-ink, #191919) !important;
	margin-bottom: 18px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-info a,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-form-login-toggle a,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-form-coupon-toggle a {
	color: var(--fpd-ink, #191919) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}

/* Login / coupon expanded forms */
body.woocommerce-checkout:not(.fpd-thankyou-active) form.woocommerce-form-login,
body.woocommerce-checkout:not(.fpd-thankyou-active) form.checkout_coupon {
	background: #fff !important;
	border: 1px solid rgba(25, 25, 25, .08) !important;
	border-radius: 10px !important;
	padding: 20px !important;
	margin-bottom: 18px !important;
}

body.woocommerce-checkout:not(.fpd-thankyou-active) form.woocommerce-form-login .button,
body.woocommerce-checkout:not(.fpd-thankyou-active) form.checkout_coupon .button {
	background: var(--fpd-ink, #191919) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 10px 22px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer;
	font-family: inherit !important;
}

/* ── Error / notice boxes ──────────────────────────────────── */
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-error,
body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-notices-wrapper .woocommerce-error {
	background: rgba(181, 65, 65, .08) !important;
	border-left: 3px solid #b54141 !important;
	border-radius: 8px !important;
	padding: 14px 18px !important;
	color: #b54141 !important;
	font-size: 13.5px !important;
	list-style: none !important;
}

/* ── Mobile tightening ─────────────────────────────────────── */
@media (max-width: 768px) {
	body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-billing-fields,
	body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review,
	body.woocommerce-checkout:not(.fpd-thankyou-active) .woocommerce-additional-fields {
		padding: 20px 18px;
	}
	body.woocommerce-checkout:not(.fpd-thankyou-active) #customer_details h3,
	body.woocommerce-checkout:not(.fpd-thankyou-active) #order_review_heading {
		font-size: 17px !important;
	}
}

/* ============================================================
 * Defeat Elementor / theme wrappers that add borders + paddings
 * around the WC checkout widget. We only target wrappers that
 * directly contain the WC checkout markup, so non-WC widgets
 * elsewhere on the page keep their styling.
 * ============================================================ */
body.woocommerce-checkout:not(.fpd-thankyou-active) .elementor-widget-woocommerce-checkout-page,
body.woocommerce-checkout:not(.fpd-thankyou-active) .elementor-widget-woocommerce-checkout-page .elementor-widget-container,
body.woocommerce-checkout:not(.fpd-thankyou-active) .e-woocommerce-checkout-page-container,
body.woocommerce-checkout:not(.fpd-thankyou-active) .e-checkout__order_review {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Some themes draw a divider between #order_review and the form via
   a left border. Squash that too. */
body.woocommerce-checkout:not(.fpd-thankyou-active) .col2-set .col-1,
body.woocommerce-checkout:not(.fpd-thankyou-active) .col2-set .col-2 {
	border: 0 !important;
	padding: 0 !important;
}

/* And the .woocommerce-checkout main wrapper itself */
body.woocommerce-checkout:not(.fpd-thankyou-active) form.woocommerce-checkout,
body.woocommerce-checkout:not(.fpd-thankyou-active) form.checkout {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* ============================================================
 * 3-dot menu trigger on calendar + week items.
 *
 * Always visible on desktop AND mobile so users can spot it
 * without hovering. Anchored to top-right of the wrapper —
 * outside the text flow so it doesn't overlap the workout
 * title. Larger touch target on phones.
 * ============================================================ */
.fpd-calendar__menu-btn,
.fpd-week__menu-btn {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(25, 25, 25, .08);
	color: var(--fpd-ink, #191919);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: background .15s, transform .12s;
	z-index: 10;
	pointer-events: auto !important;       /* defeat parent listeners that set this to none */
}

.fpd-calendar__menu-btn:hover,
.fpd-week__menu-btn:hover {
	background: var(--fpd-ink, #191919);
	color: #fff;
}
.fpd-calendar__menu-btn:active,
.fpd-week__menu-btn:active {
	transform: scale(.92);
}

/* Calendar item-wrap is already position:relative, but the 3-dot
   button sits OUTSIDE the workout text by reserving room on the
   right side of the item with extra padding-right. */
.fpd-calendar__item-wrap {
	position: relative;
	padding-right: 30px;       /* reserve space for the 3-dot button */
}

/* Week items — reserve space on the right for the 3-dot menu so it
   doesn't overlap the workout title. */
.fpd-week__item {
	position: relative;
	padding-right: 32px;
}
.fpd-week__menu-btn {
	top: 50%;
	transform: translateY(-50%);
	right: 6px;
	width: 26px;
	height: 26px;
}
.fpd-week__menu-btn:active {
	transform: translateY(-50%) scale(.92);
}

/* ============================================================
 * 3-dot popup menu (positioned absolute on body by JS)
 * ============================================================ */
.fpd-item-menu {
	position: absolute;
	z-index: 9999;
	min-width: 220px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .04);
	padding: 6px;
	display: flex;
	flex-direction: column;
	font-family: var(--fpd-serif, "Geologica", sans-serif);
}

.fpd-item-menu[hidden] { display: none; }

.fpd-item-menu__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--fpd-ink, #191919);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background .12s;
}

.fpd-item-menu__btn:hover {
	background: var(--fpd-tan, #E1D3BE);
	color: var(--fpd-ink, #191919);
}
.fpd-item-menu__btn:hover svg {
	color: var(--fpd-ink, #191919);
}

.fpd-item-menu__btn svg {
	flex-shrink: 0;
	color: var(--fpd-ink-3, #888);
}

.fpd-item-menu__btn--danger {
	color: #b54141;
}
.fpd-item-menu__btn--danger svg {
	color: #b54141;
}
.fpd-item-menu__btn--danger:hover {
	background: rgba(181, 65, 65, .08);
}

/* ============================================================
 * Reschedule / Duplicate / Remove modals — generic styling
 * The .fpd-modal class is already styled elsewhere; only add the
 * fields-specific helpers here.
 * ============================================================ */
.fpd-modal__field {
	margin: 14px 0;
	border: 0;
	padding: 0;
}
.fpd-modal__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fpd-ink-3, #888);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 8px;
}

.fpd-modal__field--radios {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px 0;
}

.fpd-modal__field--radios .fpd-modal__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fpd-ink-2, #4D4D4D);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.fpd-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--fpd-ink, #191919);
	cursor: pointer;
}
.fpd-radio input[type="radio"] {
	accent-color: var(--fpd-ink, #191919);
	width: 16px;
	height: 16px;
	margin: 0;
}

.fpd-modal__error {
	background: rgba(181, 65, 65, .08);
	border-left: 3px solid #b54141;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 12px 0;
	font-size: 13.5px;
	color: #b54141;
}

.fpd-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 16px -24px -20px;
	padding: 14px 24px 20px;
	background: #fff;
	position: sticky;
	bottom: -20px;          /* negative compensates the panel's own bottom padding */
	border-top: 1px solid rgba(25, 25, 25, .06);
	z-index: 2;
}

/* Body lock while a modal is open */
body.fpd-no-scroll {
	overflow: hidden;
}

/* On short viewports / mobile, give the modal more vertical room and
   shrink the mini-calendar so the buttons stay closer to the top of
   the scrollable area. */
@media (max-height: 720px), (max-width: 480px) {
	.fpd-modal__panel {
		max-height: 92vh !important;
	}
	.fpd-mini-cal {
		font-size: 12.5px;
	}
}

/* ============================================================
 * Force solid-black primary button in modals + raise font-weight
 * across all calendar/dashboard schedule-action UI so labels read
 * more clearly. !important needed because the active theme tints
 * <button> elements with higher specificity than ours.
 * ============================================================ */
.fpd-modal__actions .fpd-btn--primary,
.fpd-modal .fpd-btn--primary,
body .fpd-modal .fpd-btn.fpd-btn--primary {
	background: var(--fpd-ink, #191919) !important;
	color: #fff !important;
	border: 0 !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
.fpd-modal__actions .fpd-btn--primary:hover,
.fpd-modal .fpd-btn--primary:hover {
	background: #000 !important;
	color: #fff !important;
}

/* Ghost button in modals — readable contrast on white panel */
.fpd-modal__actions .fpd-btn--ghost,
.fpd-modal .fpd-btn--ghost {
	background: transparent !important;
	color: var(--fpd-ink, #191919) !important;
	border: 1.5px solid var(--fpd-border, rgba(25, 25, 25, .14)) !important;
	font-weight: 600 !important;
}
.fpd-modal__actions .fpd-btn--ghost:hover,
.fpd-modal .fpd-btn--ghost:hover {
	border-color: var(--fpd-ink, #191919) !important;
	background: rgba(25, 25, 25, .04) !important;
}

/* Danger button in modals (remove confirmation) */
.fpd-modal__actions .fpd-btn--danger,
.fpd-modal .fpd-btn--danger {
	background: #b54141 !important;
	color: #fff !important;
	border: 0 !important;
	font-weight: 600 !important;
}
.fpd-modal__actions .fpd-btn--danger:hover,
.fpd-modal .fpd-btn--danger:hover {
	background: #9a3535 !important;
}

/* ── Heavier weights across the schedule UI ───────────────── */

/* 3-dot menu items */
.fpd-item-menu__btn {
	font-weight: 600 !important;
}

/* Modal heading + supporting text */
.fpd-modal__title {
	font-weight: 700 !important;
	font-size: 19px !important;
}
.fpd-modal__sub {
	font-weight: 500 !important;
	color: var(--fpd-ink-2, #4D4D4D) !important;
}
.fpd-modal__label {
	font-weight: 700 !important;
	letter-spacing: .06em;
}
.fpd-radio span {
	font-weight: 500;
	color: var(--fpd-ink, #191919);
}

/* Calendar item labels (the workout title inside each calendar tile) */
.fpd-calendar__item-wrap .fpd-calendar__item,
.fpd-calendar__item {
	font-weight: 600 !important;
}

/* Weekly grid workout titles + program subtitle */
.fpd-week__title {
	font-weight: 600 !important;
}
.fpd-week__program {
	font-weight: 500 !important;
}

/* Calendar header (month/year title at the top of the calendar page) */
.fpd-mini-cal__title,
.fpd-cal-title,
.fpd-cal__title {
	font-weight: 700 !important;
}

/* Mini-calendar weekday header row + selected day */
.fpd-mini-cal__weekday {
	font-weight: 700 !important;
}
.fpd-mini-cal__day.is-selected {
	font-weight: 700 !important;
}

/* ============================================================
 * Personal info inline edit form (profile page)
 * Plain WP inputs styled to match the dashboard cards.
 * ============================================================ */
.fpd-account-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.fpd-account-form__field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fpd-ink-2, #4D4D4D);
	letter-spacing: .04em;
	text-transform: uppercase;
}
.fpd-account-form__field input[type="text"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid rgba(25, 25, 25, .12);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--fpd-ink, #191919);
	transition: border .15s, box-shadow .15s;
}
.fpd-account-form__field input[type="text"]:focus {
	outline: none;
	border-color: var(--fpd-ink, #191919);
	box-shadow: 0 0 0 3px rgba(25, 25, 25, .06);
}
.fpd-account-form__error {
	background: rgba(181, 65, 65, .08);
	border-left: 3px solid #b54141;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 0 0 12px;
	font-size: 13.5px;
	color: #b54141;
}

/* ============================================================
 * Theme override block — final pass, highest specificity.
 *
 * The Yolo theme's headline rule is:
 *
 *   body.woocommerce-account .woocommerce-MyAccount-content h3,
 *   body.woocommerce-account .woocommerce-MyAccount-content h4
 *       { font-size: ...!important }
 *
 * That selector scores 0,0,2,2 specificity and uses !important. Our
 * regular `.fpd-...__title` selectors are 0,0,1,0 — even with our own
 * !important they lose the cascade because specificity is the
 * tie-breaker for equally-important rules.
 *
 * The block below matches the theme's specificity (0,0,3,1) and
 * appears last in source order, so it definitively wins.
 * ============================================================ */
body.woocommerce-account .woocommerce-MyAccount-content .fpd-section__title {
	font-family: var(--fpd-serif, "Geologica") !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--fpd-ink, #191919) !important;
	margin: 0 0 16px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-calendar__title {
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-program-block__title {
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	margin: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-account-card__title {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-progress-card__title {
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 6px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-modal__title {
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 0 4px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content .fpd-video-card__title {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

/* ============================================================
 * Expired-access state on a program block.
 *
 * Shown in place of the videos grid when the user's access window
 * has elapsed. Gives a clear message + a buy-again CTA pointing
 * back to the product page.
 * ============================================================ */
.fpd-program-block.is-expired {
	background: rgba(225, 211, 190, .25);
	border: 1px dashed var(--fpd-tan-deep, #b89e7a);
}

.fpd-expired-notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 24px 20px;
	text-align: center;
}

.fpd-expired-notice__msg {
	margin: 0;
	font-size: 15px;
	color: var(--fpd-ink, #191919);
	max-width: 420px;
	line-height: 1.5;
}

/* ============================================================
 * Calendar item label — desktop title vs mobile compact badge.
 *
 * Desktop shows the workout title (trimmed). Mobile/tablet shows
 * a play icon + the video number — the cell is too narrow for
 * the title to read well. The full title is still available in
 * the 3-dot menu (we display it as the popup header), in the
 * tooltip (title="…") and through the screen-reader path.
 *
 * The mobile item LAYOUT (centering, padding, flex direction) is
 * defined inside the main @media (max-width: 1024px) block above,
 * not here. This block only toggles which span shows.
 * ============================================================ */
.fpd-calendar__item-title { display: inline; }
.fpd-calendar__item-compact { display: none; }

@media (max-width: 1024px) {
	.fpd-calendar__item-title { display: none; }
	.fpd-calendar__item-compact {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}
	.fpd-calendar__item-num {
		font-size: 11px;
		line-height: 1;
	}
}

/* 3-dot popup header — shows the workout name above the action
   buttons so the user knows what they're acting on (especially
   useful on mobile where the calendar cell shows only #N). */
.fpd-item-menu__header {
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--fpd-border, rgba(25, 25, 25, .08));
	font-size: 12.5px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
	line-height: 1.3;
	word-break: break-word;
	max-width: 240px;
}
.fpd-item-menu__header:empty {
	display: none;       /* no title yet → hide the header */
}

/* ============================================================
 * Info banner — used in the Profile "Προσοχή" card to explain
 * why account deletion is blocked, and elsewhere when we need
 * a low-key informational notice.
 * ============================================================ */
.fpd-info-banner {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background: rgba(225, 211, 190, .3);
	border-left: 3px solid var(--fpd-tan-deep, #b89e7a);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 16px;
}

.fpd-info-banner__icon {
	color: var(--fpd-tan-deep, #b89e7a);
	flex-shrink: 0;
	margin-top: 1px;
}

.fpd-info-banner__body {
	flex: 1;
	min-width: 0;
}

.fpd-info-banner__title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fpd-ink, #191919);
	line-height: 1.3;
}

.fpd-info-banner__msg {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fpd-ink-2, #4D4D4D);
}

/* Disabled "Διαγραφή λογαριασμού" button alongside the banner */
.fpd-btn--danger[disabled],
.fpd-btn--danger[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}