/* ============================================================
   Make Art — shared styles for: 404 / search / thankyou / dashboard
   All four pages share the same design DNA:
   - cream surface (--bg-soft) section panels
   - soft round cards with --shadow-md on hover lift
   - 8-grid spacing (var --space-* don't exist; use literal 8/16/24 etc.)
   - one orange accent (--orange) per page max — the primary CTA
   - serif --display for big titles, --sans for body
   - all states (hover/focus-visible/active/disabled) defined
   - prefers-reduced-motion respected
   ============================================================ */

/* ---------- Shared utilities (used by all 4 templates) ---------- */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Generic button — used by all 4 pages. Mirrors look-and-feel of the
   homepage CTAs but as a reusable utility. */
.makeart-404 .btn,
.makeart-search .btn,
.thankyou .btn,
.dash .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: var(--radius-full);
	border: 1px solid transparent;
	cursor: pointer;
	user-select: none;
	transition:
		background-color .18s var(--ease-out, ease-out),
		border-color .18s var(--ease-out, ease-out),
		transform 80ms ease-out,
		box-shadow .2s ease-out;
	text-decoration: none;
	min-height: 44px; /* touch target */
}
.makeart-404 .btn-primary,
.makeart-search .btn-primary,
.thankyou .btn-primary,
.dash .btn-primary {
	background: var(--orange);
	color: #fff;
	box-shadow: 0 6px 16px -6px rgba(237, 106, 38, .45);
}
.makeart-404 .btn-primary:hover,
.makeart-search .btn-primary:hover,
.thankyou .btn-primary:hover,
.dash .btn-primary:hover {
	background: #d65a16;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -6px rgba(237, 106, 38, .55);
}
.makeart-404 .btn-primary:active,
.makeart-search .btn-primary:active,
.thankyou .btn-primary:active,
.dash .btn-primary:active { transform: scale(.98); }

.makeart-404 .btn-ghost,
.makeart-search .btn-ghost,
.thankyou .btn-ghost,
.dash .btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.makeart-404 .btn-ghost:hover,
.makeart-search .btn-ghost:hover,
.thankyou .btn-ghost:hover,
.dash .btn-ghost:hover {
	background: var(--bg-soft);
	border-color: var(--ink-muted);
}

.btn-sm { padding: 8px 16px !important; font-size: 13px !important; min-height: 36px !important; }

.makeart-404 .btn:focus-visible,
.makeart-search .btn:focus-visible,
.thankyou .btn:focus-visible,
.dash .btn:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}


/* ============================================================
   404 page
   ============================================================ */
.m404 {
	background: var(--bg);
	padding: 80px 24px 96px;
}
.m404__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.m404__art {
	max-width: 320px;
	margin: 0 auto 24px;
}
.m404__title {
	font-family: var(--serif);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.15;
	letter-spacing: -.02em;
	margin: 0 0 12px;
	color: var(--ink);
}
.m404__lead {
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-soft);
	margin: 0 auto 32px;
	max-width: 520px;
}
.m404__search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	padding: 6px 6px 6px 18px;
	max-width: 540px;
	margin: 0 auto 32px;
	box-shadow: var(--shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.m404__search:focus-within {
	border-color: var(--orange);
	box-shadow: 0 0 0 4px rgba(237, 106, 38, .12);
}
.m404__search-icon { color: var(--ink-muted); flex-shrink: 0; }
.m404__search input {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: var(--sans);
	font-size: 16px;
	padding: 12px 8px;
	color: var(--ink);
	min-width: 0;
}
.m404__search input:focus { outline: none; }
.m404__search button {
	padding: 12px 22px;
	border-radius: var(--radius-full);
	background: var(--orange);
	color: #fff;
	border: 0;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.m404__search button:hover { background: #d65a16; }
.m404__search button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.m404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px;
	font-size: 14px;
	color: var(--ink-soft);
	margin-bottom: 64px;
}
.m404__links-label { color: var(--ink-muted); }
.m404__links a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
	padding: 4px 2px;
}
.m404__links a:hover { color: var(--orange); border-color: var(--orange); }
.m404__links a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

.m404__rail {
	border-top: 1px solid var(--line-soft);
	padding-top: 56px;
	margin-top: 32px;
}
.m404__rail-title {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 24px;
	color: var(--ink);
}
.m404__rail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
}
.m404__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 14px;
	transition: transform .2s var(--ease-out, ease-out), box-shadow .2s ease, border-color .2s ease;
}
.m404__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--line);
}
.m404__card:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
.m404__card-img {
	display: block;
	aspect-ratio: 1;
	background: var(--bg-soft) center/cover no-repeat;
	border-radius: var(--radius-md);
}
.m404__card-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.m404__card-price { font-size: 14px; color: var(--orange); font-weight: 700; }


/* ============================================================
   Search page
   ============================================================ */
.search-hero {
	background: var(--bg-soft);
	padding: 56px 24px 40px;
	border-bottom: 1px solid var(--line-soft);
}
.search-hero__inner {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}
.search-hero__eyebrow {
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 600;
	margin: 0 0 8px;
}
.search-hero__title {
	font-family: var(--serif);
	font-size: clamp(26px, 4vw, 40px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 8px;
	color: var(--ink);
	line-height: 1.2;
}
.search-hero__title span { color: var(--orange); }
.search-hero__count {
	font-size: 15px;
	color: var(--ink-soft);
	margin: 0 0 28px;
}
.search-hero__form {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	padding: 6px 6px 6px 18px;
	max-width: 540px;
	margin: 0 auto;
	box-shadow: var(--shadow-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
	color: var(--ink-muted);
}
.search-hero__form:focus-within {
	border-color: var(--orange);
	box-shadow: 0 0 0 4px rgba(237, 106, 38, .12);
}
.search-hero__form input {
	flex: 1;
	border: 0; background: transparent;
	font-family: var(--sans);
	font-size: 16px; padding: 12px 8px;
	color: var(--ink);
	min-width: 0;
}
.search-hero__form input:focus { outline: none; }
.search-hero__form button {
	padding: 12px 22px;
	border-radius: var(--radius-full);
	background: var(--orange); color: #fff;
	border: 0;
	font-family: var(--sans);
	font-weight: 600; font-size: 14px;
	cursor: pointer;
	transition: background-color .15s ease;
}
.search-hero__form button:hover { background: #d65a16; }

/* Type-filter pills (under the hero) — let the visitor narrow the
   results to products / posts / pages. Active pill gets the orange fill,
   counts in soft pills inside. */
.search-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}
.search-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
	min-height: 38px;
}
.search-tab:hover {
	background: var(--bg-soft);
	border-color: var(--ink-muted);
	color: var(--ink);
}
.search-tab:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
.search-tab.is-active {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
	box-shadow: 0 4px 12px -4px rgba(237, 106, 38, .45);
}
.search-tab.is-active:hover { background: #d65a16; border-color: #d65a16; }
.search-tab__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 20px; padding: 0 6px;
	background: var(--bg-soft);
	border-radius: var(--radius-full);
	font-size: 11px; font-weight: 700;
	color: var(--ink-muted);
}
.search-tab.is-active .search-tab__count {
	background: rgba(255, 255, 255, .25);
	color: #fff;
}

/* Highlight the matched term inside titles. */
.search-mark {
	background: linear-gradient(120deg, rgba(237, 106, 38, .14), rgba(237, 106, 38, .25));
	color: var(--orange);
	font-weight: 700;
	padding: 1px 3px;
	border-radius: 4px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.search-results {
	background: var(--bg);
	padding: 56px 24px 80px;
}
.search-results__inner {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
}
.search-results__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
}
.search-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 16px;
	transition: transform .2s ease-out, box-shadow .2s ease, border-color .2s ease;
}
.search-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--line);
}
.search-card:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
.search-card__img {
	display: block;
	aspect-ratio: 4 / 3;
	/* `contain` not `cover` — wide bottle photos / tall card mockups
	   were getting their tops/sides cut off. With contain the whole
	   product is visible inside a soft cream tile. */
	background: var(--bg-soft) center/contain no-repeat;
	border-radius: var(--radius-md);
	border: 1px solid var(--line-soft);
}
.search-card__img--blank {
	background: linear-gradient(135deg, var(--bg-soft) 0%, var(--orange-light) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--orange);
	opacity: .7;
}
.search-card__img--blank svg { width: 38%; height: auto; max-width: 64px; }
/* Content cards (post/page) get a subtle ribbon flag so they read as
   not-a-product at a glance. Product cards keep the clean look. */
.search-card.is-content .search-card__type {
	color: var(--orange);
}
.search-card.is-product .search-card__type {
	color: var(--ink-muted);
}
.search-card__body { display: flex; flex-direction: column; gap: 4px; }
.search-card__type {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-weight: 600;
}
.search-card__title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.search-card__excerpt {
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.search-card__price { font-size: 15px; font-weight: 700; color: var(--orange); }

.search-pagination { margin-top: 48px; display: flex; justify-content: center; }
.search-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; gap: 6px;
	list-style: none; padding: 0; margin: 0;
}
.search-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; min-height: 40px;
	padding: 0 10px;
	border-radius: var(--radius-full);
	font-family: var(--sans);
	font-size: 14px;
	color: var(--ink-soft);
	background: #fff;
	border: 1px solid var(--line);
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.search-pagination .page-numbers:hover { background: var(--bg-soft); }
.search-pagination .page-numbers.current {
	background: var(--orange); color: #fff; border-color: var(--orange);
}
.search-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--orange); outline-offset: 2px;
}

.search-empty {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	color: var(--ink-soft);
}
.search-empty svg { color: var(--ink-muted); margin-bottom: 16px; }
.search-empty h2 {
	font-family: var(--serif);
	font-size: 28px; font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 12px; color: var(--ink);
}
.search-empty p { font-size: 16px; line-height: 1.6; margin: 0 0 28px; }

.search-empty__cats {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin-bottom: 32px;
}
.search-empty__cat {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-full);
	font-size: 14px; font-weight: 600;
	color: var(--ink); text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.search-empty__cat:hover {
	background: var(--orange-light);
	border-color: var(--orange);
	transform: translateY(-1px);
}
.search-empty__cat:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.search-empty__cat-count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; padding: 0 6px;
	background: var(--bg-soft);
	border-radius: var(--radius-full);
	font-size: 11px; font-weight: 700; color: var(--ink-muted);
}

.search-empty__cta {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}


/* ============================================================
   Thank You page
   ============================================================ */
.thankyou {
	max-width: 920px;
	margin: 0 auto;
	padding: 56px 24px 96px;
}
.thankyou__hero { text-align: center; margin-bottom: 56px; }
.thankyou__hero-art {
	position: relative;
	display: inline-flex; flex-direction: column; align-items: center;
	margin-bottom: 18px;
}
.thankyou__confetti {
	position: absolute; top: 14px; left: 50%;
	transform: translateX(-50%);
	pointer-events: none;
}
.thankyou__eyebrow {
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--orange);
	margin: 0 0 8px;
}
.thankyou__title {
	font-family: var(--serif);
	font-size: clamp(30px, 5vw, 44px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 12px;
	line-height: 1.15;
}
.thankyou__lead {
	font-size: 17px;
	color: var(--ink-soft);
	line-height: 1.65;
	max-width: 540px;
	margin: 0 auto;
}
.thankyou__lead strong { color: var(--ink); font-weight: 700; }

.thankyou__section-title {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 20px;
}

/* timeline */
.thankyou__timeline {
	background: var(--bg-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-xl);
	padding: 32px;
	margin-bottom: 32px;
}
.timeline {
	list-style: none; padding: 0; margin: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.timeline__step {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 12px;
	position: relative;
}
.timeline__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 19px;
	right: calc(100% - 18px);
	left: -16px;
	height: 2px;
	background: var(--line);
}
.timeline__step.is-done:not(:last-child)::after,
.timeline__step.is-active:not(:last-child)::after {
	background: var(--orange);
}
[dir="rtl"] .timeline__step:not(:last-child)::after {
	right: auto;
	left: -16px;
}
.timeline__dot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: var(--radius-full);
	background: #fff;
	border: 2px solid var(--line);
	font-family: var(--serif);
	font-weight: 700;
	color: var(--ink-muted);
	font-size: 16px;
	flex-shrink: 0;
	z-index: 1;
}
.timeline__step.is-done .timeline__dot {
	background: var(--orange); color: #fff; border-color: var(--orange);
}
.timeline__step.is-active .timeline__dot {
	background: #fff; color: var(--orange); border-color: var(--orange);
	box-shadow: 0 0 0 4px rgba(237, 106, 38, .15);
}
.timeline__body { display: flex; flex-direction: column; gap: 4px; line-height: 1.4; }
.timeline__body strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.timeline__body small { font-size: 12px; color: var(--ink-soft); }

.thankyou__panels {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
	margin-bottom: 56px;
}
.thankyou__panel {
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-xl);
	padding: 32px;
}

.meta-list {
	display: grid; grid-template-columns: 130px 1fr;
	row-gap: 12px; column-gap: 16px;
	margin: 0 0 24px;
	font-size: 14px;
}
.meta-list dt { color: var(--ink-muted); font-weight: 500; }
.meta-list dd { margin: 0; color: var(--ink); font-weight: 500; }
.meta-list dd strong { color: var(--orange); font-weight: 700; }

.order-items {
	border-top: 1px solid var(--line-soft);
	padding-top: 20px;
	display: flex; flex-direction: column; gap: 14px;
}
.order-item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center; gap: 14px;
}
.order-item__img {
	display: block;
	width: 56px; height: 56px;
	background: var(--bg-soft) center/cover no-repeat;
	border-radius: var(--radius-md);
	border: 1px solid var(--line-soft);
}
.order-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-item__name {
	font-size: 14px; font-weight: 600; color: var(--ink);
	line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.order-item__qty { font-size: 12px; color: var(--ink-muted); }
.order-item__price { font-size: 14px; font-weight: 700; color: var(--ink); }

.addr-card, .help-card {
	background: var(--bg-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 20px;
	margin-bottom: 16px;
}
.addr-card h3, .help-card h3 {
	font-family: var(--serif);
	font-size: 16px; font-weight: 700;
	margin: 0 0 8px; color: var(--ink);
}
.addr-card address {
	font-style: normal;
	font-size: 14px; line-height: 1.6;
	color: var(--ink-soft);
}
.help-card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 12px; }

.thankyou__rec { margin-bottom: 56px; }
.thankyou__rec-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px;
}
.rec-card {
	display: flex; flex-direction: column; gap: 10px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 14px;
	transition: transform .2s ease-out, box-shadow .2s ease, border-color .2s ease;
}
.rec-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--line);
}
.rec-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rec-card__img {
	display: block;
	aspect-ratio: 1;
	background: var(--bg-soft) center/cover no-repeat;
	border-radius: var(--radius-md);
}
.rec-card__name {
	font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-card__price { font-size: 14px; font-weight: 700; color: var(--orange); }

.thankyou__final-cta {
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
	padding-top: 32px;
	border-top: 1px solid var(--line-soft);
}

.thankyou__no-order {
	text-align: center; max-width: 480px; margin: 80px auto;
}
.thankyou__no-order h1 {
	font-family: var(--serif); font-size: 28px;
	margin: 0 0 12px; color: var(--ink);
}
.thankyou__no-order p { color: var(--ink-soft); margin: 0 0 24px; }


/* ============================================================
   My Account SHELL — wraps nav + endpoint content
   ============================================================ */

/* Kill the default WP "החשבון שלי" page title — our hero takes over.
   Targets BOTH the WC body class (.woocommerce-account) AND the WP
   page-id (page-id-29 for the my-account page) so it works even when
   WC's body_class filter isn't applied for some reason. */
.woocommerce-account .entry-header,
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account .wp-block-post-title,
.woocommerce-account > header.entry-header,
.woocommerce-account article > h1.entry-title,
body.page-id-29 .entry-title,
body.page-id-29 .entry-header,
body.page-id-29 .wp-block-post-title { display: none !important; }
.woocommerce-account article.page,
.woocommerce-account article.hentry,
body.page-id-29 article.page,
body.page-id-29 article.hentry { padding-top: 0; }

/* Reset WC's default "before/after_main_content" wrappers so our shell
   is the SOLE container — no double padding, no stretched columns. */
.woocommerce-account .woocommerce-notices-wrapper {
	max-width: var(--container-max, 1280px);
	margin: 16px auto 0;
	padding: 0 24px;
}

.myaccount-shell {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	max-width: var(--container-max, 1280px);
	margin: 32px auto 64px;
	padding: 0 24px;
	align-items: flex-start;
}
.myaccount-shell__content {
	min-width: 0;          /* prevent overflow with long order numbers etc. */
}
.myaccount-shell__content > * { margin-top: 0; }

/* ---------- Sidebar nav ---------- */
.myaccount-nav {
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-2xl);
	padding: 16px;
	position: sticky;
	top: 100px;
	overflow: hidden;
}
.myaccount-nav__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 12px 18px;
	margin: -16px -16px 12px;
	background: linear-gradient(135deg, var(--bg-soft) 0%, var(--orange-light) 100%);
	border-bottom: 1px solid var(--line-soft);
}
.myaccount-nav__avatar {
	width: 48px; height: 48px;
	border-radius: var(--radius-full);
	background: var(--orange);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--serif);
	font-weight: 700; font-size: 18px;
	flex-shrink: 0;
	overflow: hidden;
	box-shadow: 0 4px 10px -4px rgba(237, 106, 38, .35);
}
.myaccount-nav__avatar img,
.myaccount-nav__avatar-img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: var(--radius-full);
	display: block;
}
.myaccount-nav__greeting {
	display: flex; flex-direction: column; gap: 2px;
	min-width: 0;
}
.myaccount-nav__greeting small {
	font-size: 12px;
	color: var(--ink-muted);
	font-weight: 500;
}
.myaccount-nav__greeting strong {
	font-family: var(--serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.myaccount-nav__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: 2px;
}
.myaccount-nav__item a {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	font-family: var(--sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
	min-height: 44px; /* touch target */
}
.myaccount-nav__item a svg {
	color: var(--ink-muted);
	flex-shrink: 0;
	transition: color .15s ease, transform .15s ease;
}
.myaccount-nav__item a:hover {
	background: var(--bg-soft);
	color: var(--ink);
}
.myaccount-nav__item a:hover svg { color: var(--orange); }
.myaccount-nav__item a:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}
.myaccount-nav__item.is-active a {
	background: var(--orange);
	color: #fff;
	box-shadow: 0 4px 12px -4px rgba(237, 106, 38, .4);
}
.myaccount-nav__item.is-active a svg { color: #fff; }
.myaccount-nav__item.is-logout {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line-soft);
}
.myaccount-nav__item.is-logout a {
	color: var(--ink-muted);
}
.myaccount-nav__item.is-logout a:hover {
	background: #fde7e7;
	color: #8e2f2f;
}
.myaccount-nav__item.is-logout a:hover svg { color: #c14444; }

/* Mobile: collapse the sidebar to a horizontal scrollable rail. */
@media (max-width: 880px) {
	.myaccount-shell {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.myaccount-nav {
		position: static;
		padding: 12px;
	}
	.myaccount-nav__head {
		margin-bottom: 8px;
		padding: 12px;
	}
	.myaccount-nav__list {
		flex-direction: row;
		overflow-x: auto;
		gap: 6px;
		padding-bottom: 4px;
		scrollbar-width: thin;
	}
	.myaccount-nav__item { flex-shrink: 0; }
	.myaccount-nav__item a {
		padding: 10px 14px;
		min-height: 40px;
		white-space: nowrap;
	}
	.myaccount-nav__item.is-logout {
		margin-top: 0; padding-top: 0;
		border-top: none;
		border-inline-start: 1px solid var(--line-soft);
		padding-inline-start: 6px; margin-inline-start: 6px;
	}
}

/* ============================================================
   Dashboard (My Account)
   ============================================================ */
.dash {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 40px 24px 80px;
}

.dash__hero {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: center;
	background:
		linear-gradient(135deg, var(--bg-soft) 0%, var(--bg-warm) 100%);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-2xl);
	padding: 40px;
	margin-bottom: 32px;
}
.dash__hero-eyebrow {
	font-size: 14px;
	color: var(--orange);
	font-weight: 600;
	margin: 0 0 4px;
}
.dash__hero-title {
	font-family: var(--display, var(--serif));
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 12px;
	line-height: 1.1;
}
.dash__hero-lead {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
	max-width: 520px;
}
.dash__hero-stats {
	display: flex;
	gap: 12px;
}
.stat {
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 18px 22px;
	min-width: 110px;
	text-align: center;
}
.stat__value {
	font-family: var(--serif);
	font-size: 26px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1;
}
.stat__label {
	font-size: 12px;
	color: var(--ink-muted);
	margin-top: 6px;
	letter-spacing: .04em;
}
.stat--accent {
	background: var(--orange);
	border-color: var(--orange);
}
.stat--accent .stat__value, .stat--accent .stat__label { color: #fff; }
.stat--accent .stat__label { opacity: .9; }

.dash__quick {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}
.quick-card {
	display: flex; flex-direction: column; gap: 6px;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 22px;
	color: var(--ink);
	transition: transform .2s ease-out, box-shadow .2s ease, border-color .2s ease;
}
.quick-card svg { color: var(--orange); margin-bottom: 6px; }
.quick-card strong {
	font-family: var(--sans);
	font-size: 16px; font-weight: 700;
	color: var(--ink);
}
.quick-card span { font-size: 13px; color: var(--ink-soft); }
.quick-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--orange);
}
.quick-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.dash__panels {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}
.dash__panel {
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-xl);
	padding: 28px;
}
.dash__panel-head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 20px;
}
.dash__panel-head h2 {
	font-family: var(--serif);
	font-size: 22px; font-weight: 700;
	color: var(--ink); margin: 0;
}
.dash__panel-link {
	font-size: 14px; font-weight: 600;
	color: var(--orange); text-decoration: none;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	transition: background-color .15s ease;
}
.dash__panel-link:hover { background: var(--orange-light); }
.dash__panel-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.orders-list { display: flex; flex-direction: column; gap: 12px; }
.order-row {
	display: grid;
	grid-template-columns: 56px 1fr auto auto 18px;
	align-items: center; gap: 16px;
	padding: 14px;
	background: var(--bg-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: var(--ink);
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.order-row:hover {
	background: #fff;
	border-color: var(--orange);
	transform: translateY(-1px);
}
.order-row:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.order-row__img {
	width: 56px; height: 56px;
	background: var(--bg) center/cover no-repeat;
	border-radius: var(--radius-md);
	border: 1px solid var(--line-soft);
}
.order-row__img--blank {
	background: repeating-linear-gradient(45deg, var(--bg-soft) 0 8px, var(--bg-warm) 8px 16px);
}
.order-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-row__num { font-size: 14px; font-weight: 700; color: var(--ink); }
.order-row__date { font-size: 12px; color: var(--ink-muted); }

.order-status {
	display: inline-flex; align-items: center;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 12px; font-weight: 600;
	background: var(--bg);
	border: 1px solid var(--line);
	color: var(--ink-soft);
}
.order-status--processing { background: #fef0e6; border-color: #ed6a26; color: #b54e1a; }
.order-status--completed  { background: #e7f5e8; border-color: #5aa363; color: #2f6e3a; }
.order-status--on-hold,
.order-status--pending     { background: #fff5d8; border-color: #d4a574; color: #8a6a30; }
.order-status--cancelled,
.order-status--failed,
.order-status--refunded   { background: #fde7e7; border-color: #d76b6b; color: #8e2f2f; }

.order-row__total { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.order-row__chevron { color: var(--ink-muted); }
[dir="rtl"] .order-row__chevron { transform: scaleX(-1); }

.orders-empty {
	text-align: center; padding: 40px 20px; color: var(--ink-soft);
}
.orders-empty svg { color: var(--ink-muted); margin-bottom: 12px; }
.orders-empty p { font-size: 15px; margin: 0 0 20px; }

.dash__panel--side {
	padding: 0; background: transparent; border: none;
	display: flex; flex-direction: column; gap: 16px;
}
.info-card {
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-xl);
	padding: 24px;
}
.info-card h3 {
	font-family: var(--serif);
	font-size: 16px; font-weight: 700;
	margin: 0 0 12px; color: var(--ink);
}
.info-card p { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.info-card dl {
	display: grid; grid-template-columns: 80px 1fr;
	row-gap: 8px; column-gap: 12px;
	margin: 0 0 16px;
	font-size: 13px;
}
.info-card dt { color: var(--ink-muted); }
.info-card dd { margin: 0; color: var(--ink); font-weight: 600; }
.info-card--accent {
	background: linear-gradient(135deg, var(--orange-light), #fdf6ec);
	border-color: var(--orange);
}


/* ============================================================
   Responsive — collapse to single column at small widths
   ============================================================ */
@media (max-width: 900px) {
	.thankyou__panels,
	.dash__panels { grid-template-columns: 1fr; }
	.dash__hero { grid-template-columns: 1fr; }
	.dash__hero-stats { justify-content: flex-start; flex-wrap: wrap; }
	.timeline { grid-template-columns: repeat(2, 1fr); }
	.timeline__step:not(:last-child)::after,
	[dir="rtl"] .timeline__step:not(:last-child)::after { display: none; }
}

@media (max-width: 600px) {
	.m404 { padding: 56px 16px 64px; }
	.m404__search { flex-wrap: wrap; padding: 8px; border-radius: var(--radius-lg); }
	.m404__search input { width: 100%; padding: 10px; }
	.m404__search button { width: 100%; padding: 12px; }

	.search-hero { padding: 40px 16px 32px; }
	.search-hero__form { flex-wrap: wrap; padding: 8px; border-radius: var(--radius-lg); }
	.search-hero__form input { width: 100%; padding: 10px; }
	.search-hero__form button { width: 100%; padding: 12px; }

	.thankyou { padding: 40px 16px 64px; }
	.thankyou__panel { padding: 22px; }
	.thankyou__timeline { padding: 22px; }

	.dash { padding: 24px 16px 56px; }
	.dash__hero { padding: 28px; }
	.dash__panel { padding: 20px; }
	.order-row {
		grid-template-columns: 48px 1fr;
		grid-template-rows: auto auto;
		row-gap: 8px;
	}
	.order-row__img { grid-row: span 2; }
	.order-row__status { grid-column: 2; }
	.order-row__total { grid-column: 2; font-size: 16px; }
	.order-row__chevron { display: none; }
}


/* ============================================================
   Accessibility — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.makeart-404 *, .makeart-search *, .thankyou *, .dash *,
	.m404__card, .search-card, .quick-card, .order-row, .rec-card, .btn {
		animation: none !important;
		transition: none !important;
	}
}