/* ─────────────────────────────────────────────────────────────────────
   account-profile.css — the logged-in account screens: `.ap-profile`
   (profile / orders / addresses shell + panels) and `.ap-order`
   (single order view).

   Extracted from the profile-family sandbox templates' inline <style>
   blocks (task 0026) into ONE shared sheet consumed by the sandbox
   pages AND the live account root templates. The `.ap-profile` SHELL
   (wrapper / title / body / nav / panels) was duplicated verbatim
   across user-profile / orders / addresses sandboxes — deduped here.

   SELF-CONTAINED like account-auth.css: the sandbox profile pages load
   only product-page-chrome.css, so the checkbox primitive is included
   here too. url() icon refs are `../img/sandbox/…` (assets/css/ base).
   The `.ap-pp__personalize__field` / `-field-input` primitives DO live
   in chrome.css and are NOT redeclared.
   ───────────────────────────────────────────────────────────────────── */

/* ── Shared `.ap-profile` shell (profile / orders / addresses) ── */

/* Body wrapper — wide functional footprint, content pinned to the outer
   edge of grid column 2 / column 11 (`--grid-col2-inset`). */
.ap-profile {
	padding: 64px var(--grid-col2-inset, 245px) 88px;
}
.ap-profile__title {
	color: var(--text-primary, #191919);
	text-align: center;
}
.ap-profile__body {
	margin-top: var(--space-48, 48px);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* Navigator — account-section menu, one column + gutter in from the
   wrapper's content edge. */
.ap-profile__nav {
	display: flex;
	flex-direction: column;
	margin-left: calc(var(--grid-col-w, 114.67px) + var(--grid-gutter, 32px));
}
.ap-profile__nav-item + .ap-profile__nav-item {
	margin-top: 6px;
}
.ap-profile__nav-item {
	display: flex;
	padding-right: var(--space-32, 32px);
	align-items: center;
	align-self: stretch;
	border-radius: var(--radius-15, 15px);
	color: var(--text-primary, #191919);
	cursor: pointer;
	transition: background-color 250ms ease-out, color 250ms ease-out;
}
.ap-sandbox .ap-profile__nav-item:hover,
.ap-sandbox .ap-profile__nav-item:focus,
.ap-sandbox .ap-profile__nav-item:focus-visible,
.ap-sandbox .ap-profile__nav-item:active,
.ap-sandbox .ap-profile__nav-item.is-active {
	background-color: var(--gray-500, #787878);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
/* Logout keeps its resting look on interaction (an exit we don't invite),
   but the states are still pinned so no brand wash leaks in. */
.ap-sandbox .ap-profile__nav-item--logout:hover,
.ap-sandbox .ap-profile__nav-item--logout:focus,
.ap-sandbox .ap-profile__nav-item--logout:focus-visible,
.ap-sandbox .ap-profile__nav-item--logout:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
}
.ap-profile__nav-icon {
	display: flex;
	padding: 14px;
	align-items: center;
	gap: 10px;
}
.ap-profile__nav-icon svg {
	display: block;
}
.ap-profile__nav-divider {
	height: 1px;
	align-self: stretch;
	background: var(--divider-background-light, #E4E4E4);
	margin: var(--space-32, 32px) 0 var(--space-24, 24px);
}

/* Panels column — cards stack with a 32px rhythm, right edge one column
   + gutter in from the wrapper's content edge. */
.ap-profile__panels {
	display: flex;
	flex-direction: column;
	gap: var(--space-32, 32px);
	margin-right: calc(var(--grid-col-w, 114.67px) + var(--grid-gutter, 32px));
}

/* ── Empty-state card (Figma 1728:5132, Orders-empty frame 1728:4922) ──
   Centered white card in the panels slot: AGO mark at 20% opacity, a
   heading-sm line, and a compact 40px primary CTA. Shared by the Orders
   and Addresses views (copy + CTA differ per page); shows when the
   page's list is empty (`?empty=1` demos it in the sandboxes). Width
   matches `.ap-profile__panel` (grid cols 6→10, ~701px on our 96px-
   margin grid; the design file's 120px-margin grid reads 682px). */
.ap-profile__empty {
	display: flex;
	width: calc(5 * var(--grid-col-w, 114.67px) + 4 * var(--grid-gutter, 32px));
	padding: var(--space-64, 64px) var(--space-32, 32px);
	box-sizing: border-box;
	flex-direction: column;
	align-items: center;
	gap: var(--space-32, 32px);
	border: 1px solid var(--gray-100, #F0F0F0);
	border-radius: var(--radius-15, 15px);
	background: var(--basic-white, #FFF);
}
.ap-profile__empty__lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16, 16px);
}
.ap-profile__empty__mark {
	display: block;
	width: 96px;
	height: 57px;
	object-fit: contain;
	opacity: 0.2;
}
.ap-profile__empty__text {
	margin: 0;
	color: var(--text-primary, #191919);
	text-align: center;
}
/* CTA — compact 40px primary button (radius-10, 14px medium), rendered
   as <a> on Orders (link to the shop) and <button> on Addresses (opens
   the add-address drawer). All five properties pinned on every
   interactive state per the brand-wash lock. */
.ap-profile__empty__cta {
	display: inline-flex;
	height: 40px;
	min-width: 200px;
	padding: var(--space-8, 8px) var(--space-12, 12px);
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-10, 10px);
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-14, 14px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}
.ap-sandbox .ap-profile__empty__cta:hover,
.ap-sandbox .ap-profile__empty__cta:focus,
.ap-sandbox .ap-profile__empty__cta:focus-visible,
.ap-sandbox .ap-profile__empty__cta:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}

/* ── Profile (edit-account + password) panels ── */

/* Gray-50 rounded card spanning grid columns 6→10. */
.ap-profile__panel {
	display: flex;
	width: calc(5 * var(--grid-col-w, 114.67px) + 4 * var(--grid-gutter, 32px));
	padding: var(--space-32, 32px) var(--space-48, 48px);
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24, 24px);
	border-radius: var(--radius-15, 15px);
	background: var(--gray-50, #F7F7F7);
}
.ap-profile__panel-title {
	color: var(--text-primary, #191919);
}
.ap-profile__fields {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--space-16, 16px);
}
.ap-profile__fields .ap-pp__personalize__field {
	flex: 0 0 auto;
}
.ap-profile__field-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--space-8, 8px);
}
.ap-profile__field-label {
	color: var(--text-primary, #191919);
}
.ap-profile__field-error {
	display: none;
	color: var(--input-helper-error, #B8000E);
	text-align: right;
}
.ap-pp__personalize__field.is-invalid .ap-profile__field-error {
	display: block;
}

/* Password field shell — input + right-pinned show/hide toggle. */
.ap-profile__pw {
	position: relative;
}
.ap-profile__pw .ap-pp__personalize__field-input {
	width: 100%;
	padding-right: 48px;
	color: var(--text-primary, #191919);
}
.ap-profile__pw__toggle {
	position: absolute;
	top: 50%;
	right: var(--space-12, 12px);
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ap-profile__pw__toggle__icon {
	display: block;
}

/* Save CTA — primary 60px/15px button, full panel width. */
.ap-profile__submit {
	align-self: stretch;
	display: flex;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border-radius: var(--radius-15, 15px);
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	cursor: pointer;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
}
.ap-sandbox .ap-profile__submit:hover,
.ap-sandbox .ap-profile__submit:focus,
.ap-sandbox .ap-profile__submit:focus-visible,
.ap-sandbox .ap-profile__submit:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

/* Checkbox primitive (self-contained — ago.css isn't loaded on sandbox
   profile pages; used by the addresses drawer's main-address opt-in). */
.ap-pp__personalize__checkbox {
	appearance: none;
	-webkit-appearance: none;
	accent-color: initial;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin: 0;
	border: 1px solid var(--gray-200, #E4E4E4);
	border-radius: 6px;
	background: #FFFFFF;
	cursor: pointer;
}
.ap-sandbox .ap-pp__personalize__checkbox:checked {
	background-color: transparent;
	background-image: var(--ap-pp-checkbox-icon);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):hover,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):focus,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):focus-visible,
.ap-sandbox .ap-pp__personalize__checkbox:not(:checked):active {
	background-color: #FFFFFF;
	border-color: var(--gray-200, #E4E4E4);
	color: inherit;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-pp__personalize__checkbox:checked:hover,
.ap-sandbox .ap-pp__personalize__checkbox:checked:focus,
.ap-sandbox .ap-pp__personalize__checkbox:checked:focus-visible,
.ap-sandbox .ap-pp__personalize__checkbox:checked:active {
	background-color: transparent;
	background-image: var(--ap-pp-checkbox-icon);
	border-color: transparent;
	color: inherit;
	outline: none;
	box-shadow: none;
}

/* ── Orders list ── */

/* Order row — gray-50 strip spanning grid columns 5→10. */
.ap-profile__order-row {
	display: flex;
	width: calc(6 * var(--grid-col-w, 114.67px) + 5 * var(--grid-gutter, 32px));
	padding: var(--space-16, 16px) var(--space-24, 24px);
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
	border-radius: var(--radius-15, 15px);
	background: var(--gray-50, #F7F7F7);
}
.ap-profile__order-details {
	display: flex;
	align-items: center;
	gap: var(--space-32, 32px);
}
/* Detail/label/value/actions are scoped to `.ap-profile__order-row` because
   the v2 card (`.ap-profile__order-card`) reuses the same class names with a
   different layout (see the v2 block below). */
.ap-profile__order-row .ap-profile__order-detail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.ap-profile__order-row .ap-profile__order-detail__label {
	color: var(--text-secondary, #5C5C5C);
}
.ap-profile__order-row .ap-profile__order-detail__value {
	color: var(--text-primary, #191919);
}
.ap-profile__order-detail__value--paid {
	color: var(--green-9, #24A100);
}
.ap-profile__order-detail__value--cancelled {
	color: var(--red-500, #FF0014);
}
.ap-profile__order-row .ap-profile__order-actions {
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	margin-left: auto;
}
.ap-profile__order-btn {
	display: flex;
	height: 40px;
	padding: var(--space-8, 8px) var(--space-12, 12px);
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-10, 10px);
	background: var(--button-tertiary-background-enabled, #FFF);
	color: var(--text-primary, #191919);
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.ap-sandbox .ap-profile__order-btn:hover,
.ap-sandbox .ap-profile__order-btn:focus,
.ap-sandbox .ap-profile__order-btn:focus-visible,
.ap-sandbox .ap-profile__order-btn:active {
	background-color: var(--button-tertiary-background-enabled, #FFF);
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-profile__order-btn--pay {
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
}
.ap-sandbox .ap-profile__order-btn--pay:hover,
.ap-sandbox .ap-profile__order-btn--pay:focus,
.ap-sandbox .ap-profile__order-btn--pay:focus-visible,
.ap-sandbox .ap-profile__order-btn--pay:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
}
.ap-profile__order-btn__icon {
	display: block;
	width: 16px;
	height: 16px;
	aspect-ratio: 1 / 1;
}

/* ── Orders list v2 (`.ap-profile__order-card`) — the card redesign from
   user-profile-orders-v2-sandbox.php (supersedes the v1 strip above). One
   order per gray-50 card: meta line ("Užsakymas" · date + status badge),
   bold order number, divider, "Viso (su PVM)" total, full-width actions.
   The `.ap-profile__panels` gap tightens to 8px on this view — set on the
   live template's panels wrapper via the `--orders-v2` modifier below. ── */
.ap-profile__panels--orders-v2 {
	gap: var(--space-8, 8px);
}
.ap-profile__order-card {
	display: flex;
	width: calc(5 * var(--grid-col-w, 114.67px) + 4 * var(--grid-gutter, 32px));
	padding: var(--space-32, 32px) var(--space-48, 48px);
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-24, 24px);
	border-radius: var(--radius-15, 15px);
	background: var(--gray-50, #F7F7F7);
}
/* Meta line — "Užsakymas" · date, status badge pushed right; sits flush on
   the number row (negative margin cancels the card's 24px column gap). */
.ap-profile__order-meta {
	display: flex;
	align-items: center;
	align-self: stretch;
	gap: var(--space-8, 8px);
	color: var(--text-secondary, #5C5C5C);
	margin-bottom: calc(0px - var(--space-24, 24px));
}
.ap-profile__order-meta__dot {
	width: 4px;
	height: 4px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: var(--gray-400, #A3A3A3);
}
/* Status badge — `.ap-badge--compact` pinned right; default tertiary, paid
   green, cancelled red. The dot rides currentColor. */
.ap-profile__order-status {
	margin-left: auto;
	gap: var(--space-4, 4px);
	color: var(--text-tertiary, #787878);
}
.ap-profile__order-status__dot {
	width: 6px;
	height: 6px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: currentColor;
}
.ap-profile__order-status--paid {
	background: var(--green-1, #EDFFE8);
	color: var(--green-8, #2ABA00);
}
.ap-profile__order-status--cancelled {
	background: var(--red-50, #FFE5E7);
	color: var(--red-500, #FF0014);
}
.ap-profile__order-divider {
	height: 1px;
	align-self: stretch;
	background: var(--divider-background-light, #E4E4E4);
	margin: calc(var(--space-8, 8px) - var(--space-24, 24px)) 0;
}
/* Detail rows on the card — label left, value right (contrast the v1 strip's
   stacked label/value, scoped above). */
.ap-profile__order-card .ap-profile__order-detail {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	align-self: stretch;
	gap: var(--space-12, 12px);
}
.ap-profile__order-card .ap-profile__order-detail__label {
	color: var(--text-primary, #191919);
}
.ap-profile__order-detail__label-suffix {
	color: var(--text-tertiary, #787878);
}
.ap-profile__order-card .ap-profile__order-detail__value {
	color: var(--text-primary, #191919);
	text-align: right;
}
/* Actions fill the card width; each button an equal third (or a lone
   "Peržiūrėti" spans the whole row). */
.ap-profile__order-card .ap-profile__order-actions {
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	align-self: stretch;
}
.ap-profile__order-card .ap-profile__order-actions .ap-profile__order-btn {
	flex: 1 1 0;
}

/* ── Single order view (`.ap-order`) ── */

.ap-order {
	position: relative;
	padding-top: 64px;
}
.ap-order__back {
	position: absolute;
	top: 77px;
	left: var(--grid-margin, 96px);
	display: inline-flex;
	padding: 20px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--radius-999, 999px);
	background: var(--icon-button-secondary-background-enabled, #F0F0F0);
	cursor: pointer;
}
.ap-order__back__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-order__back__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
.ap-sandbox .ap-order__back:hover,
.ap-sandbox .ap-order__back:focus,
.ap-sandbox .ap-order__back:focus-visible,
.ap-sandbox .ap-order__back:active {
	background-color: var(--icon-button-secondary-background-enabled, #F0F0F0);
	color: inherit;
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-order__title {
	color: var(--text-primary, #191919);
	text-align: center;
}
.ap-order__subtitle {
	margin-top: var(--space-16, 16px);
	margin-bottom: 62px;
	color: var(--text-secondary, #5C5C5C);
	text-align: center;
}
.ap-order__sections {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24, 24px);
}
.ap-order__group {
	display: flex;
	flex-direction: column;
	gap: var(--space-8, 8px);
}
.ap-order__group-title {
	padding-left: var(--space-24, 24px);
	color: var(--text-primary, #191919);
}
.ap-order__section {
	display: flex;
	width: calc(6 * var(--grid-col-w, 114.67px) + 5 * var(--grid-gutter, 32px));
	padding: var(--space-16, 16px) var(--space-24, 24px);
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-12, 12px);
	border-radius: var(--radius-15, 15px);
	background: var(--gray-50, #F7F7F7);
}
.ap-order__section__row {
	align-self: stretch;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-16, 16px);
	color: var(--text-primary, #191919);
}
.ap-order__section__value {
	text-align: right;
}
.ap-order__section__divider {
	height: 1px;
	align-self: stretch;
	background: var(--divider-background-light, #E4E4E4);
}

/* ── ≤1512px (down to the mobile breakpoint) — the content footprint
   widens from the middle ten columns to all 12: the wrapper's side
   insets drop to the plain grid margin AND the family's internal
   one-column insets collapse, so the nav's left edge lands on column
   1 and every card's right edge on column 12, while each card's inner
   (left) edge stays on the column it held at desktop. ── */
@media (min-width: 769px) and (max-width: 1512px) {
	.ap-profile {
		padding-inline: var(--grid-margin, 96px);
	}
	.ap-profile__nav {
		margin-left: 0;
	}
	.ap-profile__panels {
		margin-right: 0;
	}
	/* Left edge holds on column 6. */
	.ap-profile__panel {
		width: calc(7 * var(--grid-col-w, 114.67px) + 6 * var(--grid-gutter, 32px));
	}
	/* Left edge holds on column 5. */
	.ap-profile__order-row {
		width: calc(8 * var(--grid-col-w, 114.67px) + 7 * var(--grid-gutter, 32px));
	}
	/* Left edge holds on column 6. */
	.ap-profile__order-card {
		width: calc(7 * var(--grid-col-w, 114.67px) + 6 * var(--grid-gutter, 32px));
	}
}

/* ── Mobile (≤768px) — the family baseline: 24px insets, nav stacks over
   panels, fixed column spans span full width. ── */
@media (max-width: 768px) {
	.ap-profile {
		padding: 24px 24px 64px;
	}
	.ap-profile__body {
		flex-direction: column;
		gap: var(--space-32, 32px);
	}
	.ap-profile__nav {
		margin-left: 0;
		align-self: stretch;
	}
	.ap-profile__panels {
		margin-right: 0;
	}
	.ap-profile__panel,
	.ap-profile__order-row,
	.ap-profile__order-card {
		width: 100%;
	}
	.ap-order {
		padding-left: 24px;
		padding-right: 24px;
	}
	/* In-flow on mobile (see the modal-close-clearance rule): the desktop
	   anchor (top 77 / left 96) has no gutter to live in here and the pill
	   landed on the centered title text below 768px. As its own row above
	   the title, overlap is impossible by construction. */
	.ap-order__back {
		position: static;
		margin-bottom: var(--space-16, 16px);
	}
	.ap-order__section {
		width: 100%;
	}
}

/* ── Addresses (address book) — cards + slide-in drawer ── */

/* Address card = a `.ap-profile__panel` whose head/body gap is 16px (the
   edit-account panel keeps 24px); scoped by content so no markup change. */
.ap-profile__panel:has(> .ap-profile__address-head) {
	gap: var(--space-16, 16px);
}
.ap-profile__address-head {
	align-self: stretch;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-16, 16px);
}
.ap-profile__address-name {
	color: var(--text-primary, #191919);
}
.ap-profile__address-body {
	align-self: stretch;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-16, 16px);
}
.ap-profile__address-details {
	display: flex;
	flex-direction: column;
	gap: var(--space-8, 8px);
}
.ap-profile__address-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-8, 8px);
	color: var(--text-secondary, #5C5C5C);
}
.ap-profile__address-row__icon {
	display: block;
	width: 20px;
	height: 20px;
	aspect-ratio: 1 / 1;
}
.ap-profile__address-actions {
	display: flex;
	align-items: center;
	gap: var(--space-16, 16px);
}
.ap-profile__address-action {
	display: flex;
	align-items: center;
	gap: var(--space-4, 4px);
	color: var(--text-tertiary, #787878);
	cursor: pointer;
}
.ap-sandbox .ap-profile__address-action:hover,
.ap-sandbox .ap-profile__address-action:focus,
.ap-sandbox .ap-profile__address-action:focus-visible,
.ap-sandbox .ap-profile__address-action:active {
	background-color: transparent;
	color: var(--text-tertiary, #787878);
	border-color: transparent;
	outline: none;
	box-shadow: none;
	text-decoration: none;
}
.ap-profile__address-action__icon {
	display: block;
	width: 16px;
	height: 16px;
	aspect-ratio: 1 / 1;
}

/* Add-address CTA — the ghost (secondary) button under the cards. The
   `.ap-auth__secondary` recipe is duplicated from account-auth.css here so
   the address book styles standalone (the two sheets never co-load: auth =
   logged-out, profile = logged-in). */
.ap-auth__secondary {
	display: flex;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border-radius: var(--radius-15, 15px);
	border: 2px solid var(--button-secondary-outline-enabled, #F0F0F0);
	background: transparent;
	color: var(--text-primary, #191919);
	cursor: pointer;
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
}
.ap-sandbox .ap-auth__secondary:hover,
.ap-sandbox .ap-auth__secondary:focus,
.ap-sandbox .ap-auth__secondary:focus-visible,
.ap-sandbox .ap-auth__secondary:active {
	background-color: transparent;
	color: var(--text-primary, #191919);
	border-color: var(--button-secondary-outline-hover, var(--button-secondary-outline-enabled, #F0F0F0));
	outline: none;
	box-shadow: none;
}
.ap-profile__add-address__icon {
	display: block;
	width: 20px;
	height: 20px;
	aspect-ratio: 1 / 1;
}

/* Drawer — fixed full-viewport stage above the sticky header, dim scrim +
   a right-anchored drawer (left edge on grid column 8) sliding in from
   the edge. */
.ap-profile__address-modal {
	position: fixed;
	inset: 0;
	z-index: 1102;
	overflow: hidden;
	pointer-events: none;
}
.ap-profile__address-modal.is-open {
	pointer-events: auto;
}
body.ap-profile__address-modal-open { overflow: hidden; }
.ap-profile__address-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--backdrop-background-light, rgba(10, 10, 10, 0.30));
	cursor: pointer;
	opacity: 0;
	transition: opacity 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ap-profile__address-modal.is-open .ap-profile__address-modal__backdrop {
	opacity: 1;
}
/* Right-anchored drawer reaching left to the left edge of grid column
   8 (the 5th column from the right) — the shared left edge for every
   side drawer on the site. The `100%` basis is the fixed inset-0
   wrapper, which spans the viewport, so the token's own `100%`
   resolves against the same box. The mobile block
   below replaces this with a full-width bottom sheet. */
.ap-profile__address-modal__drawer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - var(--grid-col8-inset, 1123px));
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 48px 64px 32px;
	box-sizing: border-box;
	background: var(--drawer-background, var(--basic-white, #FFF));
	transform: translateX(100%);
	transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.ap-profile__address-modal.is-open .ap-profile__address-modal__drawer {
	transform: translateX(0);
}
.ap-profile__address-modal__grabber {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.ap-profile__address-modal__backdrop,
	.ap-profile__address-modal__drawer { transition: none; }
}
.ap-profile__address-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ap-profile__address-modal__title {
	margin: 0;
	color: var(--text-primary, #191919);
}
.ap-profile__address-modal__close {
	display: inline-flex;
	padding: 14px;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	border: 0;
	border-radius: 999px;
	background: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.50));
	cursor: pointer;
}
.ap-profile__address-modal__close__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
}
.ap-profile__address-modal__close__icon img {
	display: block;
	width: 100%;
	height: 100%;
}
.ap-sandbox .ap-profile__address-modal__close:hover,
.ap-sandbox .ap-profile__address-modal__close:focus,
.ap-sandbox .ap-profile__address-modal__close:focus-visible,
.ap-sandbox .ap-profile__address-modal__close:active {
	background-color: var(--icon-button-tertiary-background-enabled, rgba(255, 255, 255, 0.50));
	color: inherit;
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-profile__address-modal__form {
	margin-top: var(--space-32, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--space-16, 16px);
	min-height: 0;
	overflow-y: auto;
}
.ap-profile__address-modal__form .ap-pp__personalize__field {
	flex: 0 0 auto;
}
.ap-profile__address-modal__form .ap-pp__personalize__field-input {
	color: var(--text-primary, #191919);
}
.ap-profile__address-modal__main {
	display: flex;
	align-items: center;
	gap: var(--space-8, 8px);
	margin: 0;
	color: var(--text-secondary, #5C5C5C);
	cursor: pointer;
	flex: 0 0 auto;
}
.ap-profile__address-modal__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: auto;
	padding-top: var(--space-24, 24px);
}
.ap-profile__address-modal__cancel,
.ap-profile__address-modal__save {
	display: flex;
	height: 60px;
	padding: 18px 20px;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	gap: var(--space-8, 8px);
	border: 0;
	border-radius: var(--radius-15, 15px);
	font-family: var(--font-family-ui, 'Outfit', sans-serif);
	font-size: var(--font-size-16, 16px);
	font-weight: var(--font-weight-medium, 500);
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
}
.ap-profile__address-modal__cancel {
	flex: 1 1 0;
	white-space: nowrap;
	background: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
}
.ap-profile__address-modal__save {
	flex: 4 1 0;
	background: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
}
.ap-sandbox .ap-profile__address-modal__cancel:hover,
.ap-sandbox .ap-profile__address-modal__cancel:focus,
.ap-sandbox .ap-profile__address-modal__cancel:focus-visible,
.ap-sandbox .ap-profile__address-modal__cancel:active {
	background-color: var(--button-secondary-background-enabled, #F0F0F0);
	color: var(--text-primary, #191919);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}
.ap-sandbox .ap-profile__address-modal__save:hover,
.ap-sandbox .ap-profile__address-modal__save:focus,
.ap-sandbox .ap-profile__address-modal__save:focus-visible,
.ap-sandbox .ap-profile__address-modal__save:active {
	background-color: var(--button-primary-background-enabled, #191919);
	color: var(--text-white, #FFF);
	border-color: transparent;
	outline: none;
	box-shadow: none;
}

@media (max-width: 768px) {
	/* Drawer becomes a bottom sheet. */
	.ap-profile__address-modal__drawer {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 90vh;
		padding: 8px 24px 12px;
		border-radius: var(--radius-15, 15px) var(--radius-15, 15px) 0 0;
		transform: translateY(100%);
		transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
	}
	.ap-profile__address-modal.is-open .ap-profile__address-modal__drawer {
		transform: translateY(0);
	}
	.ap-profile__address-modal__grabber {
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto 12px;
		border-radius: var(--radius-999, 999px);
		background: var(--gray-100, #F0F0F0);
	}
	.ap-profile__address-modal__close {
		display: flex;
		padding: 8px;
	}
}