/* My account (Account, Library): the dashboard cards, quotes, credit and company pages. Theme tokens, with
   fallbacks for pages outside the block theme. Loaded on account pages only (Account::enqueue). The account
   grid, its menu and the form fields are the theme's (tokens.css: My Account, WooCommerce forms), not repeated here. */

/* Never wider than the screen: a long table scrolls inside its own box. */
.woocommerce-MyAccount-content { overflow-wrap: break-word; }
/* position: relative keeps the hidden "Actions" heading (.screen-reader-text, absolutely placed) inside the box:
   without it that heading's containing block is the page, and a phone page scrolls sideways to reach it. */
.wg-table-scroll { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wg-table-scroll table { min-width: 520px; margin: 0; }
.wg-table-scroll td, .wg-table-scroll th { white-space: nowrap; }
.wg-table-scroll td:nth-child(2) { white-space: normal; min-width: 160px; }
.wg-amount { font-variant-numeric: tabular-nums; text-align: right; }

.wg-account-hello { margin: 0 0 20px; color: var(--wg-muted, #5f5b55); }
.wg-account-lead { max-width: 64ch; margin: 0 0 20px; }
.wg-account-h { margin: 32px 0 12px; font-size: 1.25rem; }
/* A note can wrap to two lines on a phone: a rounded rectangle, not the theme's one-line pill (--wg-radius). */
.wg-account-note { margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: var(--wg-surface-2, #f2ebe0); border-left: 3px solid var(--wg-accent, #0a5844); color: var(--wg-ink, #161616); }
.wg-account-note a { color: var(--wg-accent, #0a5844); }
.wg-account-empty { margin: 0 0 24px; padding: 20px 24px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface-2, #f2ebe0); }
.wg-account-empty p { margin: 0 0 12px; max-width: 60ch; }
.wg-account-empty p:last-child { margin-bottom: 0; }
.woocommerce-MyAccount-content .wg-muted { color: var(--wg-muted, #5f5b55); font-size: .9375rem; }

/* Dashboard: one card per thing to look at, two or three across. */
.wg-home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 0 0 32px; }
.wg-home-card { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-home-card__h { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.wg-home-card p { margin: 0; font-size: .9375rem; }
.wg-home-card__big { font-family: var(--wp--preset--font-family--display, serif); font-size: 1.75rem !important; line-height: 1.2; font-variant-numeric: tabular-nums; }
.wg-home-card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .9375rem; }
.wg-home-card__list li { display: grid; gap: 2px; }
.wg-home-card__list small { color: var(--wg-muted, #5f5b55); }
.wg-home-card__more { margin-top: auto !important; padding-top: 4px; }
.wg-home-card__more a { color: var(--wg-accent, #0a5844); text-underline-offset: 3px; }

/* Credit: the balance first, always. */
.wg-credit-summary { margin: 0 0 24px; padding: 20px 24px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface-2, #f2ebe0); }
.wg-credit-summary p { margin: 0 0 8px; }
.wg-credit-balance { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wg-credit-balance strong { font-family: var(--wp--preset--font-family--display, serif); font-size: 2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.wg-credit-sources { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9375rem; color: var(--wg-muted, #5f5b55); }

/* Booking fee offer (Quotes and Credit). */
.wg-booking-cta { margin: 0 0 24px; padding: 20px 24px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-booking-cta h2 { margin: 0 0 8px; font-size: 1.25rem; }
.wg-booking-cta p { margin: 0 0 12px; max-width: 64ch; }
.wg-booking-cta p:last-child { margin-bottom: 0; }

/* Company details: one column of full-width fields, the note above them. The fields themselves (48px, the
   --wg-field edge, 16px text) and the red * are the theme's WooCommerce form rules. */
.wg-company-form { display: grid; gap: 4px; max-width: 640px; margin: 0 0 32px; }
.wg-company-form .form-row { margin: 0 0 12px; padding: 0; }
.wg-company-form label { display: block; margin-bottom: 6px; }
/* The note above says "Complete the fields marked *": WooCommerce hides form stars (visibility: hidden), these show. */
body .woocommerce form.wg-company-form .form-row .required { visibility: visible; }
.wg-company-form .wg-check label { display: flex; gap: 10px; align-items: center; }

/* Signed out (Account::loginIntro, WooCommerce's login and register forms). What an account gives, above both. */
.wg-login-intro { margin: 0 0 32px; padding: 20px 24px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface-2, #f2ebe0); }
.wg-login-intro__lead { margin: 0 0 10px; max-width: 64ch; font-size: 1.0625rem; }
.wg-login-intro__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 24px; font-size: .9375rem; }
.wg-login-intro__list li { position: relative; padding-left: 20px; }
.wg-login-intro__list li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--wg-accent, #0a5844); }
.wg-login-intro__list strong { font-weight: 500; }
/* "Remember me" as the gift finder's check pills (.wg-gf__check): a 48px target next to Log in, not a bare 13px box.
   The pill stays before the button, in WooCommerce's DOM order, so the screen and the Tab order agree. */
body .woocommerce form.login .form-row:has(> .woocommerce-form-login__rememberme) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body .woocommerce form.login .form-row .woocommerce-form-login__submit { float: none; margin: 0; }
body .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 18px 0 16px; border-radius: 999px; background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-field, #857d72); font-size: 15px; cursor: pointer; user-select: none; }
body .woocommerce .woocommerce-form-login__rememberme input { width: 18px; height: 18px; margin: 0; accent-color: var(--wg-accent, #0a5844); cursor: inherit; }
body .woocommerce .woocommerce-form-login__rememberme:has(input:checked) { box-shadow: inset 0 0 0 2px var(--wg-accent, #0a5844); }
body .woocommerce .woocommerce-form-login__rememberme:has(input:focus-visible) { outline: 2px solid var(--wg-accent, #0a5844); outline-offset: 2px; }
/* Phones: one column, no floats, Register first as the page prints it (templates/woocommerce/myaccount/form-login.php),
   so the screen and the Tab order agree. The benefits are set tighter, and the forms' headings closer to them, so a
   new buyer's REGISTER button is on the first screen (390x844). */
@media (max-width: 699px) {
  .wg-login-intro { margin-bottom: 0; padding: 12px 14px; } /* the account grid's gap (tokens.css) spaces it */
  .wg-login-intro__lead { margin-bottom: 4px; font-size: .9375rem; line-height: 1.4; }
  .wg-login-intro__list { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: .875rem; line-height: 1.35; }
  .wg-login-intro__list li { padding-left: 16px; }
  .wg-login-intro__list li::before { left: 0; top: .5em; width: 7px; height: 7px; }
  body .woocommerce #customer_login.col2-set { display: flex; flex-direction: column; gap: 32px; }
  body .woocommerce #customer_login.col2-set::before, body .woocommerce #customer_login.col2-set::after { content: none; }
  body .woocommerce #customer_login .u-column1, body .woocommerce #customer_login .u-column2 { float: none; width: 100%; max-width: none; }
  body .woocommerce #customer_login h2 { margin: 0 0 12px; }
  body .woocommerce #customer_login form { margin: 0; }
  body .woocommerce #customer_login form.register > p:not(.form-row) { margin: 12px 0; }
  body .woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme { height: 44px; }
}

/* WooCommerce's "Show password" eye (added by its script beside each password field) is 22x22px: at least 24x24 to
   tap (axe target-size), its icon centred in it. */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input { min-width: 24px; min-height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }

/* Required fields said in words (templates/woocommerce/myaccount/form-login.php), not a red star: quiet, beside the label. */
.woocommerce form .wg-required { color: var(--wg-muted, #5f5b55); font-size: .875em; font-weight: 400; }

/* The dashboard hub (templates/account-hub.php): one region per h2, top to bottom; To do first. Cards and rows reuse
   the dashboard's surfaces. Status is always in words (pills, stage names); the stepper dots are decoration. */
.wg-hub { display: grid; gap: 32px; min-width: 0; }
.wg-hub__live { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--wg-surface-2, #f2ebe0); border-left: 3px solid var(--wg-accent, #0a5844); }
/* Empty, it stays rendered (not display:none) so the role=status region is in the accessibility tree before its
   first message, and that message is announced; it just takes no space and draws nothing. */
.wg-hub__live:empty { padding: 0; border: 0; background: none; }
.wg-hub-region { min-width: 0; }
.wg-hub-region > h2 { margin: 0 0 12px; font-size: 1.375rem; }
.wg-hub h3 { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.wg-hub p { margin: 0; }
.wg-hub-empty { color: var(--wg-muted, #5f5b55); max-width: 64ch; }
.wg-hub-empty a, .wg-hub-all a, .wg-hub-block__h a { color: var(--wg-accent, #0a5844); text-underline-offset: 3px; }
.wg-hub-all { margin-top: 12px !important; }
.wg-hub .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* To do: an ordered list of cards, the CTA on the right on wide screens. */
.wg-hub-todo { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wg-hub-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 20px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-hub-item--now { box-shadow: inset 4px 0 0 var(--wg-accent, #0a5844), inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-hub-item__t, .wg-hub-item__d { grid-column: 1; }
.wg-hub-item__t strong { font-weight: 500; }
.wg-hub-item__d { color: var(--wg-muted, #5f5b55); font-size: .9375rem; }
.wg-hub-item__go { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.wg-hub .button { min-height: var(--wg-btn-h-sm, 44px); }
.wg-hub-more { margin-top: 12px; }
.wg-hub-more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--wg-accent, #0a5844); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wg-hub-more > .wg-hub-todo { margin-top: 8px; }

/* On its way: one row per order, a line of seven dots under the stage. */
.wg-hub-orders, .wg-hub-rows, .wg-hub-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.wg-hub-order, .wg-hub-row { display: grid; gap: 4px; padding: 16px 20px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); min-width: 0; }
.wg-hub-order__h a { font-weight: 500; color: var(--wg-ink, #161616); text-underline-offset: 3px; }
.wg-hub-order__h span, .wg-hub-order__next, .wg-hub-row__m { color: var(--wg-muted, #5f5b55); font-size: .9375rem; }
.wg-hub-order__eta { font-size: .9375rem; }
.wg-hub-dots { display: flex; gap: 6px; margin-top: 6px; }
.wg-hub-dots span { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--wg-muted, #5f5b55); }
.wg-hub-dots .is-done { background: var(--wg-accent, #0a5844); box-shadow: none; }
.wg-hub-dots .is-next { box-shadow: inset 0 0 0 3px var(--wg-accent, #0a5844); }

/* Saved for next time: one block per kind, each with its h3. */
.wg-hub-saved { display: grid; gap: 28px; }
.wg-hub-saved > h2 { margin-bottom: -16px; }
.wg-hub-block { display: grid; gap: 10px; min-width: 0; }
.wg-hub-block__h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.wg-hub-block .wg-gifts { margin: 0; }
.wg-hub-row__go { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px !important; }
.wg-hub-pdf { color: var(--wg-accent, #0a5844); text-underline-offset: 3px; }
.wg-hub-count { font-size: .9375rem; }
.wg-hub-remove { margin: 0; }
.wg-hub-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--wg-accent, #0a5844); font: inherit; font-size: .9375rem; text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.wg-hub-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.wg-hub-grid li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wg-hub-grid li .button { margin-top: auto; }
.wg-hub-grid__img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-hub-grid__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wg-hub-grid__n { font-size: .875rem; overflow-wrap: anywhere; }
.wg-hub-logo { justify-content: center; }

/* Start here: numbered first steps. */
.wg-hub-steps { counter-reset: wg-step; }
.wg-hub-steps li { counter-increment: wg-step; position: relative; display: grid; gap: 4px; padding: 16px 20px 16px 60px; border-radius: var(--wg-radius-lg, 16px); background: var(--wg-surface, #fff); box-shadow: inset 0 0 0 1px var(--wg-line, #e6dfd3); }
.wg-hub-steps li::before { content: counter(wg-step); position: absolute; left: 20px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--wg-accent, #0a5844); color: #fff; display: grid; place-items: center; font-size: .875rem; }
.wg-hub-steps a { color: var(--wg-ink, #161616); text-underline-offset: 3px; }
.wg-hub-steps a strong { font-weight: 500; }
.wg-hub-steps span { color: var(--wg-muted, #5f5b55); font-size: .9375rem; }
.wg-hub-account .wg-home-cards { margin: 0; }

/* Phones: one column; each CTA a full-width button under its words; logos and shortlist three across. */
@media (max-width: 699px) {
  .wg-hub { gap: 28px; }
  .wg-hub-item { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .wg-hub-item__go { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .wg-hub-item__go .button, .wg-hub-row__go .button { width: 100%; justify-content: center; box-sizing: border-box; }
  .wg-hub-order, .wg-hub-row { padding: 14px 16px; }
  .wg-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .wg-hub-grid .button { width: 100%; padding: 0 8px; font-size: .75rem; box-sizing: border-box; }
  .wg-hub-steps li { padding: 14px 16px 14px 56px; }
  .wg-hub-steps li::before { left: 16px; top: 14px; }
}