/*
 * Aspen account pages — styles scoped under .aspen-container.
 *
 * Follows the agency's component sheet: lime primary buttons with uppercase
 * labels and an arrow, olive links, quiet grey option box for the club code,
 * white card on the page. The card inherits the theme's font; colors and
 * shape are custom properties so the theme can override them, e.g.:
 *   .aspen-container { --as-accent: #c3d43f; }
 */
.aspen-container {
  --as-accent: #c3d43f;
  --as-accent-text: #4a4a4a;
  --as-link: #82911e;
  --as-text: #4a4a4a;
  --as-muted: #b9b9b9;
  --as-error: #d35f5f;
  --as-success: #7d8445;
  --as-border: #d2d2d1;
  --as-box: #eeeeee;
  --as-radius: 8px;
  --as-max-width: 26rem;

  box-sizing: border-box;
  max-width: var(--as-max-width);
  margin: 2.5rem auto;
  padding: 2rem 1.75rem;
  border: 1px solid #e5e5e3;
  border-radius: var(--as-radius);
  background: #ffffff;
  font-family: inherit;
  font-weight: 500;
  color: var(--as-text);
  line-height: 1.5;
}

.aspen-container *,
.aspen-container *::before,
.aspen-container *::after {
  box-sizing: inherit;
}

.aspen-container h2 {
  margin: 0 0 0.35rem;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--as-text);
}

.aspen-container h2:focus {
  outline: none;
}

.aspen-container h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--as-text);
}

.aspen-container p {
  margin: 0 0 1rem;
}

.aspen-container .as-muted {
  color: var(--as-muted);
}

.aspen-container .as-hint {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--as-muted);
}

.aspen-container .as-field {
  margin: 0 0 1rem;
}

.aspen-container label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 12px;
}

.aspen-container input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--as-border);
  border-radius: 6px;
  font: inherit;
  color: inherit;
  background: #ffffff;
}

.aspen-container input:focus {
  outline: none;
  border-color: var(--as-link);
  box-shadow: 0 0 0 1px var(--as-link);
}

.aspen-container input.as-code {
  font-size: 1.3rem;
  letter-spacing: 0.4em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aspen-container .as-password {
  position: relative;
}

.aspen-container .as-password input {
  padding-right: 5rem;
}

.aspen-container .as-toggle {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0.25rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--as-muted);
  text-decoration: underline;
  cursor: pointer;
}

.aspen-container .as-primary {
  display: block;
  width: 100%;
  /* Uppercase text sits on the baseline while the line box reserves
     descender space below it, so equal padding looks top-heavy; the extra
     top padding centers the caps optically. */
  padding: 1.15rem 1rem 0.95rem;
  line-height: 1;
  border: 0;
  border-radius: 12px;
  background: var(--as-accent);
  color: var(--as-accent-text);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.aspen-container .as-primary::after {
  /* The agency's arrow, centered on the cap height of the label. */
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 0.5em;
  vertical-align: -2px;
  background: transparent url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 6.31067H11.25M6 11.5607L11.25 6.31067L6 1.06067' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aspen-container .as-primary:hover:not(:disabled) {
  filter: brightness(0.95);
}

.aspen-container .as-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* "Forgot password?" sits right under the password field it belongs to. */
.aspen-container .as-forgot {
  margin: -0.5rem 0 1rem;
  text-align: right;
  font-size: 0.85rem;
}

.aspen-container .as-forgot a {
  color: var(--as-link);
}

/* Optional club code, tucked into a quiet grey box behind a toggle. */

.aspen-container .as-optbox-toggle {
  display: block;
  margin: 0 0 1rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--as-link);
  text-decoration: none;
  cursor: pointer;
}

.aspen-container .as-optbox-toggle::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  margin-left: 0.4em;
  vertical-align: 1px;
  background: transparent url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.6875 0.6875L4.8125 4.8125L8.9375 0.6875' stroke='%2382911E' stroke-width='1.375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.aspen-container .as-optbox-toggle:hover {
  text-decoration: underline;
}

.aspen-container .as-optbox {
  margin: 0 0 1rem;
  padding: 1rem;
  border-radius: var(--as-radius);
  background: var(--as-box);
}

.aspen-container .as-optbox input {
  background: #ffffff;
}

.aspen-container .as-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.aspen-container .as-link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.9rem;
  color: var(--as-link);
  text-decoration: underline;
  cursor: pointer;
}

.aspen-container .as-link-button:disabled {
  color: var(--as-muted);
  cursor: default;
  text-decoration: none;
}

.aspen-container .as-error {
  margin: 0 0 1rem;
  color: var(--as-error);
  font-size: 0.9rem;
}

.aspen-container .as-status {
  margin: 0 0 1rem;
  color: var(--as-success);
  font-size: 0.9rem;
}

.aspen-container .as-error:empty,
.aspen-container .as-status:empty {
  display: none;
}

/* One-shot notices on the account page (e.g. "account created, but…"). */

.aspen-container .as-banner {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: #faeeee;
  border: 1px solid var(--as-error);
  color: var(--as-error);
  font-size: 0.9rem;
}

.aspen-container .as-banner-success {
  background: #f6f8e8;
  border-color: var(--as-accent);
  color: var(--as-success);
}

.aspen-container .as-final {
  text-align: center;
}

.aspen-container .as-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--as-accent);
  color: var(--as-accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aspen-container .as-icon svg {
  width: 35%;
  height: 35%;
  display: block;
}

.aspen-container .as-continue {
  display: inline-block;
  margin-top: 0.5rem;
  /* Same optical centering as .as-primary. */
  padding: 1.15rem 1.5rem 0.95rem;
  line-height: 1;
  border-radius: 12px;
  background: var(--as-accent);
  color: var(--as-accent-text);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.aspen-container .as-continue::after {
  /* The agency's arrow, centered on the cap height of the label. */
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 0.5em;
  vertical-align: -2px;
  background: transparent url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 6.31067H11.25M6 11.5607L11.25 6.31067L6 1.06067' stroke='%234A4A4A' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 480px) {
  .aspen-container {
    margin: 1rem auto;
    padding: 1.5rem 1.25rem;
  }
}

/* --- Account page --- */

/* The logout link sits on the title row: the title is short and fixed, so
   the link always fits beside it, unlike beside a long email address. */
.aspen-container .as-profile-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.35rem;
}

.aspen-container .as-profile-header h2 {
  margin: 0;
}

.aspen-container .as-profile-identity {
  margin: 0 0 1.5rem;
}

.aspen-container .as-profile-name {
  margin: 0;
  font-weight: 700;
}

.aspen-container .as-profile-email {
  margin: 0;
  color: var(--as-muted);
}

/* The join form keeps the quiet grey box, like the club code in the signup. */
.aspen-container .as-profile-club {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border-radius: var(--as-radius);
  background: var(--as-box);
}

/* The membership reads as page content, set off by a thin rule. */
.aspen-container .as-profile-membership {
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e5e5e3;
}

.aspen-container .as-profile-membership h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--as-muted);
}

.aspen-container .as-club-name {
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 1.1rem;
}

/* --- Club code input (signup and the account page) --- */

.aspen-container input.as-clubcode {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.aspen-container .as-secondary-link {
  display: block;
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
  color: #767676;
}

/* --- Header account icon (injected next to the cart) --- */

.aspen-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 12px;
  padding: 6px;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.aspen-account-icon {
  min-height: 24px;
}

.aspen-account-icon svg {
  width: 18px;
  height: 20px;
  display: block;
}

.aspen-account-icon:hover {
  text-decoration: none;
  opacity: 0.75;
}

/* The checkout strips its header down to logo + back button; the account
   icon follows suit instead of floating in the stripped layout. */
body.checkout .aspen-account-icon {
  display: none;
}

/* The account pages hide the theme breadcrumb: the top menu goes to
   aspen.se, so the trail leads nowhere useful on these pages. */
body:has(.aspen-container) .emporium--breadcrumbs {
  display: none;
}

/* Logged in: the icon sits on the agency's lime badge, no border. */
.aspen-account-icon--logged-in {
  background: #c2d101;
}

.aspen-account-icon--logged-in:hover {
  opacity: 1;
  filter: brightness(0.95);
}

/* --- Theme override: the cart icon, redrawn to the component sheet's ---
   --- outline style and sized to match the account icon.             --- */

.slot--header-cart .tws-mini-cart--header-cart-button .tws-mini-cart--header-cart-img::before {
  content: '' !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5.00014 14H18.1359C19.1487 14 19.6551 14 20.0582 13.8112C20.4134 13.6448 20.7118 13.3777 20.9163 13.0432C21.1485 12.6633 21.2044 12.16 21.3163 11.1534L21.9013 5.88835C21.9355 5.58088 21.9525 5.42715 21.9031 5.30816C21.8597 5.20366 21.7821 5.11697 21.683 5.06228C21.5702 5 21.4155 5 21.1062 5H4.50014M2 2H3.24844C3.51306 2 3.64537 2 3.74889 2.05032C3.84002 2.09463 3.91554 2.16557 3.96544 2.25376C4.02212 2.35394 4.03037 2.48599 4.04688 2.7501L4.95312 17.2499C4.96963 17.514 4.97788 17.6461 5.03456 17.7462C5.08446 17.8344 5.15998 17.9054 5.25111 17.9497C5.35463 18 5.48694 18 5.75156 18H19M7.5 21.5H7.51M16.5 21.5H16.51M8 21.5C8 21.7761 7.77614 22 7.5 22C7.22386 22 7 21.7761 7 21.5C7 21.2239 7.22386 21 7.5 21C7.77614 21 8 21.2239 8 21.5ZM17 21.5C17 21.7761 16.7761 22 16.5 22C16.2239 22 16 21.7761 16 21.5C16 21.2239 16.2239 21 16.5 21C16.7761 21 17 21.2239 17 21.5Z%22 stroke=%22%234A4A4A%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat !important;
}

.slot--header-cart .tws-mini-cart--header-quantity {
  background: #4a4a4a !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Breathing room below the checkout pay section. */
.tws-checkout--pay {
  margin-bottom: 40px !important;
}