/* IXXO Cart 8 storefront: the buyer's account, the order pages and the e-mail token pages (Phase 10b).
   Tokens only (the theme's colours, radius and fonts); logical properties only: the shop may
   read right to left. The shared layout comes first: the account menu beside the page, one
   column below 768 px; list rows, status tags, the action row and definition lists. Then
   one section per area of the account. */

/* The two columns: the menu, then the page. */
.sf-acct{ display: grid; gap: 32px; padding-block: 32px 0; }
.sf-acct-main{ display: grid; gap: 20px; align-content: start; min-inline-size: 0; }
.sf-acct-title{ margin-block-end: 4px; }
.sf-acct-lead{ font-size: 17px; }
.sf-acct-hint{ color: var(--muted); font-size: 14px; }
.sf-acct-link{ color: var(--ink); text-decoration: underline; font-size: 14px; }
.sf-acct-link:hover{ color: var(--accent); }

@media (min-width: 768px){
	.sf-acct{ grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
}

/* The account menu: links one under the other, the page shown marked; sign out last. */
.sf-acct-nav{ display: grid; gap: 16px; align-content: start; }
.sf-acct-nav-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sf-acct-nav-link{ display: flex; align-items: center; min-block-size: 44px; padding-inline: 12px; border-radius: var(--r); color: var(--ink-2); text-decoration: none; }
.sf-acct-nav-link:hover{ background: var(--tile); color: var(--ink); }
.sf-acct-nav-link[aria-current="page"]{ background: var(--tile); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .sf-acct-nav-link[aria-current="page"]{ box-shadow: inset -3px 0 0 var(--accent); }
.sf-acct-nav-out{ padding-inline: 12px; }

@media (max-width: 767px){
	/* On a phone the menu is one scrolling row above the page. */
	.sf-acct-nav-list{ display: flex; gap: 4px; overflow-x: auto; padding-block-end: 4px; }
	.sf-acct-nav-link{ white-space: nowrap; }
	.sf-acct-nav-link[aria-current="page"], [dir="rtl"] .sf-acct-nav-link[aria-current="page"]{ box-shadow: inset 0 -3px 0 var(--accent); }
}

/* List rows: an order, a return, a subscription, an address. */
.sf-acct-list{ list-style: none; margin: 0; padding: 0; display: grid; border-block-start: 1px solid var(--line); }
.sf-acct-row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 16px; border-block-end: 1px solid var(--line); }
.sf-acct-row-main{ flex: 1 1 240px; display: grid; gap: 4px; min-inline-size: 0; }
.sf-acct-row-meta{ color: var(--muted); font-size: 14px; }
.sf-acct-amount{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Status tags: words first, the colour only adds to them. */
.sf-acct-tag{ display: inline-flex; align-items: center; min-block-size: 24px; padding-inline: 8px; border-radius: 999px; background: var(--tile); color: var(--ink); font-size: 13px; font-weight: 600; }
.sf-acct-tag-attention{ box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); }

/* The action row: the page's buttons and links, wrapping on a phone. */
.sf-acct-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Definition lists: the facts of an order, a subscription, a profile. */
.sf-acct-facts{ display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.sf-acct-facts dt{ color: var(--muted); font-size: 14px; }
.sf-acct-facts dd{ margin: 0; }

@media (max-width: 479px){
	.sf-acct-facts{ grid-template-columns: minmax(0, 1fr); gap: 2px; }
	.sf-acct-facts dd{ margin-block-end: 8px; }
}

/* Orders, returns and the order acceptance link. */
/* A guest with an order's link has no account menu: the page takes the whole width. */
@media (min-width: 768px){
	.sf-acct-guest{ grid-template-columns: minmax(0, 1fr); }
}

/* The overview's blocks: side by side when there is room. */
.sf-acct-ov{ display: grid; gap: 24px; }
.sf-acct-ov-block{ display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); }
.sf-acct-ov-title{ font-size: 18px; margin: 0; }

@media (min-width: 1024px){
	.sf-acct-ov{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Status tags that ask for something, and finished ones (the words stay the message). */
.sf-acct-tag-pending_payment, .sf-acct-tag-partially_paid{ box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--danger); }
.sf-acct-tag-completed, .sf-acct-tag-closed, .sf-acct-tag-refunded{ background: var(--ink); color: var(--on-ink); }

/* The order page: its sections, the timeline, a seller's part, a shipment, the totals. */
.sf-acct-order-block{ display: grid; gap: 12px; }
.sf-acct-order-heading{ font-size: 20px; margin: 0; }
.sf-acct-order-status{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sf-acct-timeline{ margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
.sf-acct-suborder{ display: grid; gap: 12px; padding-block-end: 12px; }
.sf-acct-suborder-title{ font-size: 16px; margin: 0; }
.sf-acct-shipment{ padding: 12px; background: var(--tile); border-radius: var(--r); }
.sf-acct-totals dd{ text-align: end; }

@media (max-width: 479px){
	/* The totals stay label and amount on one row on a phone (the other facts stack). */
	.sf-acct-totals{ grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 16px; }
	.sf-acct-totals dd{ margin-block-end: 0; }
}
.sf-acct-address-line{ display: block; }

/* The return forms: one fieldset per line, the units box narrow. */
.sf-acct-return-form{ display: grid; gap: 16px; }
.sf-acct-return-line{ display: grid; gap: 6px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); }
.sf-acct-return-qty{ max-inline-size: 120px; }
.sf-acct-return-address{ display: grid; gap: 2px; }

/* A return's messages: the buyer's own set off on the reading side. */
.sf-acct-messages{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sf-acct-message{ padding: 12px; border-radius: var(--r); background: var(--tile); max-inline-size: 640px; }
.sf-acct-message-mine{ margin-inline-start: auto; border: 1px solid var(--line); background: transparent; }
.sf-acct-message-text{ margin-block: 4px 0; margin-inline: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* The acceptance page. */
.sf-acct-accept{ display: grid; gap: 20px; padding-block: 32px 0; }
/* Subscriptions, membership and saved cards. */
.sf-acct-sub-part{ display: grid; gap: 12px; padding-block-start: 8px; scroll-margin-block-start: 24px; }
.sf-acct-sub-heading{ font-size: 18px; margin: 0; }
.sf-acct-sub-title{ font-weight: 600; overflow-wrap: anywhere; }
.sf-acct-sub-inline{ display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
.sf-acct-sub-field{ display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.sf-acct-sub-qty{ inline-size: 96px; }
.sf-acct-plan{ display: grid; gap: 12px; padding: 20px; border: 1.5px solid var(--line); border-radius: var(--r); }
.sf-acct-plan-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sf-acct-plan-benefits{ white-space: pre-line; overflow-wrap: anywhere; }
.sf-acct-join{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-block-end: 16px; }
/* Wishlists and messages. */
/* Wishlists: the lists with their edit forms folded away, one list's items with a box to pick each. */
.sf-acct-wl-name{ color: var(--ink); font-weight: 600; text-decoration: none; }
.sf-acct-wl-name:hover{ color: var(--accent); text-decoration: underline; }
.sf-acct-wl-subtitle{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 18px; }
.sf-acct-wl-edit, .sf-acct-msg-report{ flex-basis: 100%; }
.sf-acct-wl-edit summary, .sf-acct-msg-report summary{ display: inline-flex; align-items: center; min-block-size: 44px; cursor: pointer; }
.sf-acct-wl-form, .sf-acct-wl-new{ display: flex; flex-wrap: wrap; align-items: end; gap: 12px; padding-block: 8px; }
.sf-acct-wl-new{ border-block-start: 1px solid var(--line); padding-block-start: 20px; }
.sf-acct-wl-who{ display: grid; gap: 8px; }
.sf-acct-wl-share input{ inline-size: 100%; font-family: var(--font-mono); }
.sf-acct-wl-pick{ inline-size: 24px; block-size: 24px; margin: 10px; accent-color: var(--accent); }
.sf-acct-wl-move{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Messages: the inbox rows, then a thread's messages, the buyer's own set off to the end side. */
.sf-acct-msg-subject{ color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.sf-acct-msg-subject:hover{ color: var(--accent); text-decoration: underline; }
.sf-acct-msg-unread{ font-weight: 700; }
.sf-acct-msgs{ list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sf-acct-msg{ display: grid; gap: 6px; max-inline-size: 640px; padding: 12px 16px; border-radius: var(--r); background: var(--tile); }
.sf-acct-msg-own{ justify-self: end; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sf-acct-msg-head{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; }
.sf-acct-msg-body{ margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sf-acct-msg-files{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sf-acct-msg-files a{ display: inline-flex; align-items: center; min-block-size: 44px; }
.sf-acct-msg-input{ min-block-size: 120px; resize: vertical; }
/* Profile, security, privacy and addresses. */
.sf-acct-pf-section{ display: grid; gap: 12px; padding-block: 24px; border-block-start: 1px solid var(--line); }
.sf-acct-pf-section:first-of-type{ border-block-start: 0; padding-block-start: 0; }
.sf-acct-pf-heading{ margin: 0; font-size: 18px; color: var(--ink); }
.sf-acct-pf-form{ max-inline-size: 560px; }
.sf-acct-pf-group{ display: grid; gap: 8px; inline-size: 100%; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.sf-acct-pf-group legend{ padding: 0; margin-block-end: 8px; font-weight: 600; color: var(--ink); }
.sf-acct-pf-address{ display: grid; font-style: normal; color: var(--ink-2); line-height: 1.5; }
.sf-acct-pf-blockers{ margin: 0; padding-inline-start: 20px; display: grid; gap: 8px; }
/* Becoming a seller. */
/* The seller application (storefront/seller_application): its groups of questions and the documents. */
.sf-sa-group{ display: grid; gap: 12px; inline-size: 100%; margin: 0; padding: 0; border: 0; }
.sf-sa-group legend{ font-family: var(--font-heading); font-weight: 700; font-size: 17px; margin-block-end: 8px; }
.sf-sa-sub{ font-family: var(--font-heading); font-weight: 700; font-size: 17px; color: var(--ink); }
.sf-sa-text{ min-block-size: 120px; padding-block: 10px; }
.sf-sa-plan{ display: grid; gap: 4px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: var(--r); }
.sf-sa-plan-name{ font-weight: 700; color: var(--ink); }
.sf-sa-plan-details{ margin: 0; padding-inline-start: 1.2em; color: var(--ink-2); font-size: 14px; line-height: 1.6; }