/* Sign in, register and password reset */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100dvh - var(--admin-bar)); }

.auth__media { position: sticky; top: var(--admin-bar); display: flex; align-items: flex-end; height: calc(100dvh - var(--admin-bar)); margin: 0; padding: 48px; background: var(--warm-black); overflow: hidden; }
.auth__photo { position: absolute; inset: 0; }
.auth__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(17 16 15 / 0.62), rgb(17 16 15 / 0) 55%); }
.auth__benefits { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; color: var(--bone); }
.auth__benefits-title { max-width: 14ch; font-size: 32px; line-height: 1.1; letter-spacing: -0.028em; }
.auth__benefits-list { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #e8e1d7; }
.auth__benefits-list li { display: flex; align-items: center; gap: 10px; }
.auth__benefits-list .icon { width: 14px; height: 14px; color: var(--sand); }

.auth__panel { display: grid; grid-template-rows: auto 1fr; gap: 40px; padding: 24px var(--gutter) 64px; }
.auth__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth__brand { display: inline-flex; align-items: center; min-height: 44px; }
.auth__exit { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 500; letter-spacing: 0.117em; text-transform: uppercase; color: var(--body-text); transition: color var(--dur-fast) ease; }
.auth__exit .icon { width: 14px; height: 14px; }
.auth__inner { display: flex; flex-direction: column; gap: 28px; align-self: center; justify-self: center; width: 100%; max-width: 400px; }
.auth__inner > .woocommerce-notices-wrapper, .auth__section > .woocommerce-notices-wrapper { padding: 0; }
.auth__inner > .woocommerce-notices-wrapper:not(:has(> *)), .auth__section > .woocommerce-notices-wrapper:not(:has(> *)) { display: none; }

.auth__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.auth__tab {
	padding: 14px 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.117em;
	text-transform: uppercase;
	color: var(--stone);
	transition: color var(--dur-fast) ease;
}
.auth__tab[aria-selected="true"] { color: var(--ink); }
.auth__indicator { position: absolute; bottom: -1px; left: 0; width: 50%; height: 1px; background: var(--ink); transition: transform 260ms var(--ease-in-out); }
.auth__tabs:has(> .auth__tab:nth-of-type(2)[aria-selected="true"]) .auth__indicator { transform: translateX(100%); }
@media (hover: hover) and (pointer: fine) {
	.auth__tab:hover, .auth__exit:hover { color: var(--ink); }
}

/* Both forms share one grid cell, so the block keeps the taller form's height and nothing below it jumps on switch. */
.auth__sections { display: grid; }
.auth__section {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 28px;
	transition: opacity 200ms var(--ease-out) 40ms, transform 240ms var(--ease-out) 40ms, filter 200ms var(--ease-out) 40ms, visibility 0s;
}
.auth__section[inert] {
	opacity: 0;
	visibility: hidden;
	filter: blur(2px);
	transition: opacity 120ms var(--ease-out), transform 200ms var(--ease-out), filter 120ms var(--ease-out), visibility 0s 200ms;
}
.auth__section:first-child[inert] { transform: translateX(-12px); }
.auth__section:last-child[inert] { transform: translateX(12px); }
[data-auth-tabs][data-instant] :is(.auth__tab, .auth__indicator, .auth__section) { transition: none; }
.auth__title { font-size: 40px; font-weight: 400; line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; }
.auth__lead { margin-top: -12px; font-size: 15px; line-height: 1.55; color: var(--body-text); }
.auth__typed { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.auth__form { display: flex; flex-direction: column; gap: 16px; }
.auth__form .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.auth__form .btn { margin-top: 12px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.auth__link, .auth__back { font-size: 13px; color: var(--body-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand); }
.auth__back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; text-decoration: none; }
.auth__back .icon { width: 14px; height: 14px; }
.auth__note, .auth__form .woocommerce-privacy-policy-text { font-size: 13px; line-height: 1.5; color: var(--stone); }
.auth__form .woocommerce-privacy-policy-text a { color: var(--body-text); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.auth__link:hover, .auth__back:hover { color: var(--ink); text-decoration-color: currentColor; }
}

@media (max-width: 900px) {
	.auth { grid-template-columns: 1fr; }
	.auth__media { display: none; }
	.auth__panel { gap: 24px; padding: 8px var(--gutter) 56px; }
	.auth__inner { align-self: start; }
	.auth__title { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.auth__indicator { transition: none; }
	.auth__section:is(:first-child, :last-child)[inert] { transform: none; filter: none; }
}

/* Shared form pieces */
.check { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--body-text); cursor: pointer; }
.check--block { align-items: flex-start; }
.check--block input { margin-top: 2px; }
.check__title { display: block; font-size: 14px; color: var(--ink); }
.check__hint { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--stone); }

/* Account */
.account { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) 128px; }

.account__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 48px 0 40px; }
.account__title { font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.0375em; }
.account__since { margin-top: 12px; font-size: 13px; color: var(--stone); }
.account__signout, .account-nav__signout { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.117em; text-transform: uppercase; }
.account__signout .icon, .account-nav__signout .icon { width: 16px; height: 16px; }

.account__main { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 80px; align-items: start; }
.account__content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.account__content > .woocommerce-notices-wrapper { padding: 0; }
.account__content > .woocommerce-notices-wrapper:not(:has(> *)) { display: none; }

.account-nav { position: sticky; top: calc(var(--admin-bar) + var(--header-h) + 24px); }
.account-nav__back, .account-nav__signout, .account-nav__caret { display: none; }
.account-nav__list { display: flex; flex-direction: column; gap: 2px; margin-inline: -14px; }
.account-nav__link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; color: var(--body-text); transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.account-nav__icon { flex: none; width: 18px; height: 18px; color: var(--stone); transition: color var(--dur-fast) ease; }
.account-nav__label { flex: 1; }
.account-nav__value { font-size: 12px; color: var(--stone); font-variant-numeric: tabular-nums; }
.account-nav__link[aria-current="page"] { background: var(--paper); box-shadow: inset 2px 0 0 var(--ink); font-weight: 500; color: var(--ink); }
.account-nav__link[aria-current="page"] .account-nav__icon { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
	.account-nav__link:hover { background: color-mix(in srgb, var(--paper) 60%, transparent); color: var(--ink); }
	.account-nav__link:hover .account-nav__icon { color: var(--ink); }
}

.account-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.account-head__title { font-size: 32px; font-weight: 400; line-height: 1.1; letter-spacing: -0.028em; }
.account-head__meta { margin-top: 6px; font-size: 13px; color: var(--stone); }
.account-head__link { font-size: 13px; color: var(--body-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand); }
.account-head__tabs { gap: 24px; }
.account-section { display: flex; flex-direction: column; gap: 24px; }
.account-section__lead { margin-top: -8px; font-size: 14px; color: var(--body-text); }
.account-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; color: var(--body-text); }
.account-back .icon { width: 14px; height: 14px; }

.account-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px; background: var(--paper); }
.account-empty__title { font-size: 20px; letter-spacing: -0.015em; }
.account-pager { display: flex; gap: 8px; }


.order-list { display: flex; flex-direction: column; gap: 16px; }
.order-card { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--paper); }
.order-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.order-card__meta { display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.order-card__number { font-size: 15px; font-weight: 500; }
.order-card__date { font-size: 13px; color: var(--stone); }
.order-card__progress { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; }
.order-card__progress li { height: 2px; background: var(--sand); }
.order-card__progress li.is-reached { background: var(--ink); }
.order-card__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.order-card__thumbs { display: flex; gap: 8px; }
.order-card__thumb { width: 72px; aspect-ratio: 3 / 4; background: var(--bone); }
.order-card__more { display: grid; place-items: center; font-size: 13px; color: var(--stone); }
.order-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.order-card__total { font-size: 14px; font-variant-numeric: tabular-nums; }
.order-card__buttons { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.overview { display: flex; flex-direction: column; gap: 40px; }
.overview__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.summary-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; background: var(--paper); }
.summary-tile__label { font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.summary-tile__value { flex: 1; font-size: 15px; line-height: 1.55; }
.summary-tile__link { font-size: 13px; color: var(--body-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand); }

.address-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.address-card { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px; background: var(--paper); }
.address-card__title { font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.address-card__body { flex: 1; font-size: 15px; font-style: normal; line-height: 1.6; }

.account-form { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; max-width: 640px; }
.account-form > .woocommerce-address-fields { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; }
.account-form__group { width: 100%; margin: 0; padding: 0; border: 0; }
.account-form__legend { margin-bottom: 8px; padding: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.account-form__hint { margin-bottom: 20px; font-size: 13px; line-height: 1.5; color: var(--body-text); }
.account-form__legend + .checkout-fields, .account-form__legend + .check { margin-top: 12px; }
.account-form__stack { display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
.account-form__stack .form-row { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.account-form .woocommerce-address-fields__field-wrapper { width: 100%; }

.order-view__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; }
.order-view__main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.order-view__side { display: flex; flex-direction: column; gap: 20px; padding: 28px; background: var(--paper); }
.order-view__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.order-updates { display: flex; flex-direction: column; gap: 16px; padding-top: 32px; border-top: 1px solid var(--line); }
.order-updates__title { font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.order-updates__list { display: flex; flex-direction: column; gap: 20px; }
.order-updates__item { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 1px solid var(--ink); }
.order-updates__date { font-size: 12px; color: var(--stone); }
.order-updates__text { font-size: 15px; line-height: 1.55; }

@media (max-width: 1280px) {
	.order-view__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
	.account__intro { padding: 28px 0 24px; }
	.account__signout { display: none; }
	.account:not(.account--overview) .account__intro { display: none; }
	.account__main { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.account:not(.account--overview) .account__main { padding-top: 20px; }

	.account-nav { position: static; }
	.account:not(.account--overview) .account-nav__list { display: none; }
	.account:not(.account--overview) .account-nav__back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--body-text); }
	.account-nav__back .icon { width: 14px; height: 14px; }
	.account--overview .account__content { order: -1; }
	.account--overview .account-nav__list { gap: 0; margin-inline: 0; border-top: 1px solid var(--line); }
	.account--overview .account-nav__list li { border-bottom: 1px solid var(--line); }
	.account--overview .account-nav__link { gap: 12px; padding: 15px 0; font-size: 15px; font-weight: 400; color: var(--ink); background: none; box-shadow: none; }
	.account--overview .account-nav__icon { width: 20px; height: 20px; color: var(--ink); }
	.account--overview .account-nav__value { display: block; font-size: 13px; color: var(--stone); }
	.account--overview .account-nav__caret { display: block; flex: none; width: 14px; height: 14px; color: var(--stone); }
	.account--overview .account-nav__signout { display: inline-flex; margin-top: 20px; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--stone); }

	.overview__summary { display: none; }
	.order-card { padding: 18px; gap: 16px; }
	.order-card__bottom { flex-direction: column; align-items: stretch; gap: 16px; }
	.order-card__actions { align-items: stretch; }
	.order-card__buttons { justify-content: flex-start; }
	.order-card__buttons .btn { flex: 1; }
	.order-card__thumb { width: 56px; }
	.account-head__title { font-size: 26px; }
	.account-empty { padding: 28px 20px; }

	.address-list { grid-template-columns: minmax(0, 1fr); }
	.order-view__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.order-view__side { order: -1; padding: 20px; }
}

/* Wishlist */
.wishlist { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) 128px; }
.wishlist__intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 48px 0 40px; }
.wishlist__titles { display: flex; align-items: flex-start; gap: 14px; }
.wishlist__title { font-size: clamp(40px, 5vw, 64px); font-weight: 400; line-height: 1; letter-spacing: -0.0375em; }
.wishlist__count { margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--stone); font-variant-numeric: tabular-nums; }

.wishlist__share { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.wishlist__share-button { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.117em; text-transform: uppercase; }
.wishlist__share-button .icon { width: 16px; height: 16px; }
.wishlist__share-button.is-loading { opacity: 0.5; pointer-events: none; }
.wishlist__share-link { width: min(360px, 80vw); height: 40px; font-size: 13px; }
.wishlist__share-status { font-size: 12px; color: var(--stone); }
.wishlist__share-status:empty { display: none; }

.wishlist__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; }
.wishlist__grid[aria-busy="true"] { min-height: 40vh; }

/* Subgrid lines up every card's controls in a row, even when one card shows an error under its button. */
.wish-item { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 14px; min-width: 0; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.wish-item.is-leaving { opacity: 0; transform: scale(0.97); }
.wish-item__actions { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-content: start; gap: 8px; }
.wish-item__actions:has(input[type="hidden"]) { grid-template-columns: minmax(0, 1fr); }
.wish-item__actions .select { width: 100%; }
.wish-item__actions .select__trigger { height: 44px; font-size: 12px; font-weight: 500; }
.wish-item__add { height: 44px; padding: 0 16px; }
.wish-item__error { grid-column: 1 / -1; font-size: 12px; color: var(--clay); }

.wishlist__empty { display: flex; flex-direction: column; gap: 80px; }
.wishlist__empty[hidden] { display: none; }
.wishlist__empty-panel { display: flex; align-items: center; gap: 28px; padding: 40px; background: var(--paper); }
.wishlist__empty-mark { display: grid; flex: none; place-items: center; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 50%; }
.wishlist__empty-icon { width: 24px; height: 24px; color: var(--clay); }
.wishlist__empty-text { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.wishlist__empty-title { font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.wishlist__empty-lead { max-width: 48ch; font-size: 14px; line-height: 1.55; color: var(--body-text); }
.wishlist__empty-panel .btn { flex: none; }
.wishlist__suggestions { display: flex; flex-direction: column; gap: 28px; }
.wishlist__suggestions-title { font-size: 11px; font-weight: 500; letter-spacing: 0.145em; text-transform: uppercase; color: var(--stone); }
.wishlist__guest-note { padding-top: 56px; font-size: 13px; color: var(--stone); text-align: center; }
.wishlist__guest-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
	.wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.wishlist { padding-bottom: 72px; }
	.wishlist__intro { padding: 24px 0 24px; }
	.wishlist__empty { gap: 56px; }
	.wishlist__empty-panel { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 20px; }
	.wishlist__empty-mark { width: 52px; height: 52px; }
	.wishlist__empty-title { font-size: 24px; }
	.wishlist__share { align-items: flex-start; }
	.wishlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 10px; }
	.wish-item__actions { grid-template-columns: minmax(0, 1fr); }
	.wish-item__add { padding: 0 12px; }
	.wish-item__add .icon { display: none; }
}

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