:root {
  --ab: #d3c6b5;
  --ac: #fffdf8;
  --as: #eee4d7;
  --ai: #211b18;
  --berry: #5b1f33;
  --olive: #4c5229;
  --wood: #ac8150;
  --paper: #fff8ee;
}
.account-page [data-account-panel][hidden] { display: none !important; }
.account-outbid-compact { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px 24px; padding:22px 24px; margin:0 0 24px; border:1px solid var(--ab); border-radius:10px; background:var(--ac); }
.account-outbid-score { min-width:0; }
.account-outbid-score h2 { margin:0; font:700 20px/1.3 var(--font-body); }
.account-outbid-link { color:var(--olive); text-decoration:none; }
.account-outbid-link:hover { text-decoration:underline; text-underline-offset:4px; }
.account-page .account-outbid-total { margin:6px 0; font-size:36px; line-height:1.2; }
.account-outbid-total span { font-size:22px; }
.account-page .account-outbid-places { margin:0; font-size:14px; line-height:1.5; }
.account-outbid-places span { display:inline-block; }
.account-outbid-actions [hidden] { display:none!important; }
.account-outbid-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.account-outbid-compact .ob-photo-bonus { grid-column:1/-1; border-top:1px solid var(--ab); padding-top:14px; font-size:14px; line-height:1.5; }
.account-page .account-outbid-compact .ob-photo-bonus p { margin:0 0 4px; font-size:14px; }
.account-outbid-compact .ob-photo-bonus-status { color:var(--olive); font-weight:700; }
.account-outbid-guide { display:inline; padding:0; border:0; background:none; color:var(--berry); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.account-outbid-compact .button { flex-shrink:0; min-width:92px; }
.account-outbid-compact .account-secondary { background:transparent; color:var(--olive); border-color:var(--olive); }
.account-outbid-attention { margin:8px 0 0; font-size:14px; color:var(--berry); }
.account-outbid-compact > .ob-bid-nudge { grid-column:1/-1; }
#account-outbid-summary:empty, #account-outbid-panel:empty { display:none; }
.account-outbid-rank { display:inline-block; max-width:100%; margin-top:12px; padding:6px 10px; border:1px solid var(--ab); border-radius:6px; background:var(--ac); color:var(--olive); font-size:13px; font-weight:700; line-height:1.5; text-decoration:none; }
.account-outbid-rank:hover { text-decoration:underline; text-underline-offset:3px; }
.account-outbid-rank:empty,.account-outbid-rank[hidden] { display:none; }
@media(max-width:520px) {
  .account-outbid-compact { grid-template-columns:minmax(0,1fr); padding:18px; gap:14px; }
  .account-page .account-outbid-total { font-size:32px; }
  .account-outbid-total span { font-size:20px; }
  .account-outbid-actions { flex-wrap:nowrap; gap:8px; }
  .account-outbid-actions .button { flex:0 0 88px; min-height:48px; padding-inline:12px; }
  .account-outbid-actions .account-secondary { flex:1; min-height:48px; padding-inline:8px; font-size:14px; text-align:center; }
}
.account-page,
.account-page * {
  box-sizing: border-box;
}
.account-page {
  background:
    radial-gradient(circle at 8% 0, rgb(172 129 80/13%), transparent 28rem),
    var(--paper);
  color: var(--ai);
}
.account-page .engine-header {
  background: rgb(255 248 238/90%);
  border-bottom-color: #bcae9d;
  color: var(--ai);
}
.account-page .engine-header > a:first-child {
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--berry);
}
.account-page .engine-header > a:first-child img {
  width: 145px;
}
.engine-header nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.engine-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 750;
}
.engine-page .account-shell {
  width: min(100% - 36px, 1200px);
  max-width: 1200px;
  padding-top: clamp(24px, 5vw, 54px);
}
.account-page button {
  font: inherit;
  cursor: pointer;
}
.account-page h1,
.account-page h2,
.account-page h3 {
  overflow-wrap: anywhere;
}
.account-page .eyebrow {
  margin: 0 0 14px;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.account-page .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 20px;
  border: 2px solid var(--olive);
  border-radius: 7px;
  background: var(--olive);
  color: var(--paper);
  font-weight: 800;
  text-decoration: none;
}
.account-page .button:disabled,
.account-page input:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}
.account-page :focus-visible {
  outline: 3px solid #2466a4;
  outline-offset: 3px;
}
.account-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
  min-height: 560px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--berry);
  color: var(--paper);
  box-shadow: 0 20px 50px rgb(67 20 37/15%);
}
.account-welcome-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 74px);
}
.account-welcome h1,
.account-dashboard-hero h1,
.account-state h1 {
  margin: 0 0 24px;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
}
.account-intro {
  max-width: 56ch;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
  line-height: 1.6;
}
.account-welcome .account-intro {
  color: #f5e9e8;
}
.account-trust {
  display: flex;
  gap: 10px;
  max-width: 48ch;
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgb(255 248 238/24%);
  color: #ead9d5;
  font-size: 0.9rem;
  line-height: 1.55;
}
.account-welcome .account-trust {
  color: #ead9d5;
}
.account-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 48px);
  background: var(--ac);
  color: var(--ai);
}
.account-signin-form {
  display: grid;
  gap: 10px;
  margin: 0;
}
.account-signin-form label,
.account-profile label {
  font-size: 0.86rem;
  font-weight: 800;
}
.account-signin-form input,
.account-profile input {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #887b6e;
  border-radius: 7px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.account-signin-form .button {
  width: 100%;
  margin-top: 6px;
}
.account-google {
  margin-top: 14px;
}
.account-google:empty {
  display: none;
}
.account-google .text-link,
.account-google .google-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 11px 16px;
  border: 1px solid #8e8880;
  border-radius: 7px;
  background: #fff;
  color: #25211f;
  font-weight: 750;
  text-decoration: none;
}
.account-google img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.account-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: #625a52;
  font-size: 0.8rem;
  text-align: center;
}
.account-divider::before,
.account-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--ab);
}
.account-help {
  margin: 18px 0 12px;
  color: #5b554e;
  font-size: 0.82rem;
  line-height: 1.55;
}
.account-message {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 4px solid var(--olive);
  background: #edf0dc;
  font-size: 0.84rem;
  line-height: 1.5;
}
.account-message.error {
  border-color: var(--berry);
  background: #f7e9ed;
}
.account-message:empty {
  display: none;
}
.account-recovery {
  align-self: flex-start;
  font-weight: 750;
}
.account-footer {
  display: flex;
  gap: 14px 28px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-block: 24px;
  border-top: 1px solid var(--ab);
}
.account-state {
  max-width: 820px;
  margin: 4vh auto 0;
  padding: clamp(28px, 7vw, 70px);
  border: 1px solid var(--ab);
  border-top: 7px solid var(--berry);
  border-radius: 14px;
  background: var(--ac);
  box-shadow: 0 18px 44px rgb(54 39 29/9%);
}
.account-state-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 28px;
  border-radius: 50%;
  background: #e9edd7;
  color: var(--olive);
  font-size: 1.6rem;
  font-weight: 800;
}
.account-state-mark.expired {
  background: #f4e4e8;
  color: var(--berry);
}
.account-state h1 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 8vw, 5.5rem);
}
.account-state-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 30px 0;
}
.account-state-details p {
  margin: 0;
  padding: 18px;
  border-left: 3px solid var(--wood);
  background: var(--as);
  font-size: 0.88rem;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}
.hero-actions .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 750;
}
.account-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  padding: clamp(28px, 5vw, 58px);
  border-radius: 16px;
  background: var(--berry);
  color: var(--paper);
  box-shadow: 0 18px 44px rgb(67 20 37/14%);
}
.account-dashboard-hero h1 {
  font-size: clamp(3rem, 7vw, 5.8rem);
  max-width: none;
}
.account-dashboard-hero .account-intro {
  color: #f1e5e2;
}
.account-identity {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgb(255 248 238/24%);
  border-radius: 10px;
  background: rgb(32 10 18/18%);
}
.account-identity p {
  margin: 0;
}
.account-identity p > span:first-child,
.account-identity strong {
  display: block;
}
.account-identity p > span:first-child {
  color: #e4d1d1;
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}
.account-identity strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--paper);
}
.account-verified {
  margin-top: 13px;
  color: #dce6bc;
  font-size: 0.78rem;
  font-weight: 750;
}
.account-identity form {
  margin: 18px 0 0;
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.account-signout {
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--paper);
  font-weight: 750;
  text-decoration: underline;
}
/* Account tabs: the gift section's tab component (owner 18 Oct 2026). The same declarations as
   .gift-account-tabs in gift-sender.css; tests/account-tabs-design.test.mjs keeps the two identical. */
.account-page .account-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 32px; padding: 0 0 26px; border-bottom: 1px solid #d3c6b5; }
.account-page .account-tabs a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #b6a894; border-radius: 5px; padding: 12px 18px; background: transparent; color: #4c5229; font: 400 13px/1.35 Arial, Helvetica, sans-serif; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
@media (hover: hover) { .account-page .account-tabs a:not([aria-selected="true"]):hover { border-color: #4c5229; background: #f3ebdd; } }
.account-page .account-tabs a:not([aria-selected="true"]):active { background: #ebe1d1; }
.account-page .account-tabs [aria-selected="true"] { border-color: #4c5229; background: #4c5229; color: #fff8ee; }
.account-page .account-tabs a:focus-visible { outline: 3px solid #2879c8; outline-offset: 4px; }
@media (max-width: 760px) { .account-page .account-tabs { margin: 22px 0 26px; padding-bottom: 20px; } .account-page .account-tabs a { padding: 12px 11px; font-size: 12px; } }
/* Shown as a tab, the details panel starts under the rule like every other panel; stacked without JS it keeps its gap. */
.account-dashboard .account-tabs[role="tablist"] ~ .account-profile { margin-top: 0; }
.account-content {
  margin-top: clamp(42px, 6vw, 70px);
}
.account-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--ab);
}
.account-section-heading h2,
.account-profile h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1;
}
.account-section-heading > p {
  max-width: 32ch;
  margin: 0;
  color: #60584f;
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: right;
}
.account-year {
  margin-top: 38px;
}
.account-year > h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--berry);
  font-size: 1.15rem;
}
.account-year > h2:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--ab);
}
.account-order {
  margin: 0 0 16px;
  border: 1px solid var(--ab);
  border-radius: 11px;
  background: var(--ac);
  box-shadow: 0 8px 24px rgb(51 35 27/5%);
  overflow: hidden;
}
.account-order h3 {
  margin: 0;
  padding: 20px 22px 6px;
  font-size: 1.1rem;
}
.account-order-meta {
  margin: 0;
  padding: 0 22px 20px;
  color: #635b52;
  font-size: 0.79rem;
}
.account-tickets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.account-merch {
  padding: 20px 22px;
  border-top: 1px solid #d3c6b5;
  background: var(--as);
  overflow-wrap: anywhere;
}
.account-merch h4 {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.4;
}
.account-merch-items {
  margin: 0;
  padding-left: 20px;
}
.account-merch-item {
  padding: 4px 0;
  line-height: 1.5;
}
.account-merch .merch-quantity {
  white-space: nowrap;
  font-weight: 750;
}
.account-merch-note {
  margin: 12px 0 0;
  color: #51483f;
  font-size: 0.875rem;
  line-height: 1.6;
}
.account-ticket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px 16px;
  padding: 18px 22px;
  border-top: 1px solid #e1d8cc;
}
.ticket-name {
  font-weight: 800;
  overflow-wrap: anywhere;
}
.ticket-status {
  padding: 5px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}
.ticket-checked {
  grid-column: 1/-1;
  font-size: 0.76rem;
}
.account-ticket .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
}
[data-status="valid"] .ticket-status {
  background: #edf0dc;
  color: #3c431e;
}
[data-status="checked_in"] .ticket-status {
  background: #efede8;
  color: #514b42;
}
[data-status="void"] .ticket-status {
  background: #f7e9ed;
  color: var(--berry);
}
.account-empty {
  padding: 30px;
  border: 1px dashed #aa9d8d;
  border-radius: 10px;
  background: var(--as);
}
.account-profile {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px);
  margin-top: 60px;
  padding: clamp(24px, 5vw, 48px);
  border-radius: 14px;
  background: var(--as);
}
.account-profile > div > p:last-child {
  line-height: 1.6;
}
.account-profile form {
  display: grid;
  gap: 14px;
}
.account-profile label {
  display: grid;
  gap: 8px;
}
.account-profile input[readonly] {
  background: #e7dfd3;
  color: #625b53;
}
.account-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.account-profile .button {
  justify-self: start;
}
.account-support,
.account-security {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--ab);
  border-radius: 10px;
}
.account-support p,
.account-security p,
.account-support form,
.account-security form {
  margin: 0;
}
.account-support a {
  flex: 0 0 auto;
}
.account-security button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--berry);
  font-weight: 750;
  text-decoration: underline;
}
@media (max-width: 760px) {
  .account-welcome,
  .account-dashboard-hero,
  .account-profile {
    grid-template-columns: 1fr;
  }
  .account-welcome {
    min-height: 0;
  }
  .account-section-heading {
    display: block;
  }
  .account-section-heading > p {
    margin-top: 14px;
    text-align: left;
  }
  .account-ticket {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .account-ticket .text-link {
    grid-row: 3;
  }
  .account-ticket .ticket-checked {
    grid-column: 1/-1;
  }
  .account-support,
  .account-security {
    align-items: flex-start;
    flex-direction: column;
  }
  .account-support a {
    flex: 0 1 auto;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 400px) {
  .account-shell {
    width: min(100% - 24px, 1200px);
    padding-top: 16px;
  }
  .account-welcome,
  .account-dashboard-hero,
  .account-state {
    border-radius: 10px;
  }
  .account-welcome-copy,
  .account-panel,
  .account-dashboard-hero,
  .account-state {
    padding: 24px 20px;
  }
  .account-welcome h1,
  .account-dashboard-hero h1,
  .account-state h1 {
    font-size: clamp(2.2rem, 12.5vw, 3.35rem);
  }
  .account-state-details,
  .account-field-grid {
    grid-template-columns: 1fr;
  }
  .account-ticket {
    grid-template-columns: 1fr;
    padding: 17px;
  }
  .account-ticket .ticket-status,
  .account-ticket .text-link {
    grid-column: 1;
    justify-self: start;
  }
  .account-ticket .text-link {
    grid-row: auto;
  }
  .engine-header nav {
    gap: 10px;
    font-size: 0.8rem;
  }
  .account-page .hero-actions .button {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .account-page * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

.account-page .account-profile select {
  width: 100%; min-width: 0; min-height: 54px; max-width: 100%;
  padding: 12px; border: 1px solid #887b6e; border-radius: 7px;
  background: #fff; color: var(--ai); font: inherit;
}
.account-page .account-profile form { min-width: 0; }
#phone-preview:empty { display: none; }

.account-page .ticket-entry-time { display:block; grid-column:1/-1; margin-top:.4rem; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }

/* Account collections. Existing sign-in/state and engine markup retain their selectors. */
.account-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.account-dashboard { background: var(--paper); }
.account-dashboard .account-shell { width: min(100% - 32px, 1120px); padding: 28px 0 0; }
.account-dashboard .account-dashboard-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 32px; padding: 0; border-radius: 0;
  background: transparent; color: var(--ai); box-shadow: none;
}
.account-dashboard .account-dashboard-hero h1 { margin: 0; font-size: 28px; letter-spacing: -.025em; line-height: 1.1; }
.account-dashboard .account-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 0; border: 0; border-radius: 0; background: none; }
.account-dashboard .account-identity p > span:first-child { color: #60584f; font-size: 14px; text-transform: none; }
.account-dashboard .account-identity strong { margin: 0; color: var(--ai); }
.account-dashboard .account-verified { display: block; margin-top: 2px; color: var(--olive); font-size: 14px; }
.account-dashboard .account-identity form { margin: 0; }
.account-dashboard .account-signout { color: var(--berry); }
.account-dashboard .account-content { margin-top: 0; }
.account-collection + .account-collection { margin-top: 48px; }
.account-dashboard .account-section-heading { align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; }
.account-dashboard .account-section-heading h2 { font-family: var(--font-body); font-size: clamp(26px, 4vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.account-pass-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
/* Unpaid invoice orders keep the essentials visible without expanding the card. */
.account-invoice-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.account-invoice-order { min-width: 0; padding: 12px 16px 0; border: 1px solid var(--ab); border-radius: 8px; background: var(--ac); overflow-wrap: anywhere; }
.account-invoice-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.account-page .account-invoice-status { margin: 0; padding: 4px 9px; border-radius: 20px; background: var(--as); color: var(--berry); font-size: 12px; line-height: 1.4; }
.account-page .account-invoice-overview { display: flex; flex: 1 1 240px; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; border: 0; }
.account-invoice-overview > div { min-width: 0; }
.account-invoice-overview dt { color: #60584f; font-size: 12px; line-height: 1.4; }
.account-invoice-overview dd { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; font-variant-numeric: tabular-nums; }
.account-page .account-invoice-notice { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.account-invoice-details > summary { min-height: 44px; padding: 12px 0; color: var(--olive); cursor: pointer; font-size: 14px; font-weight: 700; line-height: 20px; }
.account-page .account-invoice-facts { display: grid; gap: 2px; margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--ab); font-size: 14px; line-height: 1.5; }
.account-invoice-facts dt { color: #60584f; }
.account-invoice-facts dd { margin: 0 0 8px; }
.account-invoice-facts dd:last-child { margin-bottom: 0; }
.account-invoice-lines { margin: 0; padding: 0 0 12px 20px; font-size: 14px; line-height: 1.6; }
.account-pass {
  --account-treatment: #fff;
  display: flex; flex-direction: column; min-width: 0; padding: 10px 0 0; border: 1px solid #8d867c; border-radius: 8px;
  background: var(--account-treatment); overflow: hidden;
}
.account-pass[data-ticket-kind="tokens_only"] { --account-treatment: #5b1f33; }
.account-pass[data-ticket-kind="friday"] { --account-treatment: #ffd43b; }
.account-pass[data-ticket-kind="saturday"] { --account-treatment: #1455b8; }
.account-pass[data-ticket-kind="all_days"] { --account-treatment: repeating-linear-gradient(135deg, #ffd43b 0 4mm, #1455b8 4mm 8mm); }
.account-pass[data-ticket-kind="earlybird_vip"] { --account-treatment: repeating-linear-gradient(0deg, #111 0 2mm, #fff 2mm 4mm); }
.account-pass[data-ticket-kind="earlybird_gold"] { --account-treatment: repeating-linear-gradient(45deg, #a87916 0 1mm, #fff 1mm 4mm); }
.account-pass:is([data-ticket-kind="earlybird_vip"], [data-ticket-kind="earlybird_gold"]) { padding: 8px; }
.account-pass-face { display: flex; flex-direction: column; flex: 1; padding: 20px; background: #fff; color: #211b18; }
.account-pass-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.account-page .account-pass-event { margin: 0; color: #60584f; font-size: 14px; line-height: 1.5; }
.account-pass-heading h3 { grid-column: 1 / -1; margin: 0; font-family: var(--font-body); font-size: 23px; line-height: 1.2; letter-spacing: -.025em; }
.account-pass .ticket-status { font-size: 14px; line-height: 1.35; }
.account-page .account-reference { grid-column: 1 / -1; margin: 0 0 18px; color: #514b42; font-size: 14px; line-height: 1.5; }
.account-reference span, .account-receipt-heading h3 span { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.account-pass-validity { padding: 16px 0; border-block: 1px solid #d3c6b5; }
.account-pass h4 { margin: 0 0 8px; font-size: 16px; }
.account-validity-lines p { margin: 0; font-size: 16px; line-height: 1.65; }
.account-page .account-pass-inclusions { margin: 16px 0; font-size: 14px; line-height: 1.6; white-space: pre-line; }
.account-page .account-pass-checked { margin: 0 0 16px; color: #60584f; font-size: 14px; }
.account-pass-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin-top: auto; padding-top: 4px; }
.account-pass-actions .button { min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.account-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid #887b6e; border-radius: 7px; color: var(--ai); font-size: 16px; font-weight: 700; text-decoration: none; }
.account-calendar { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding-block: 8px; color: var(--olive); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.account-secondary:hover { background: var(--paper); }
.account-calendar:hover { color: #292d15; }
.account-dashboard [data-present="false"], .account-validity-lines p:empty,
.account-pass-inclusions:empty, .account-pass-checked:empty,
.account-pass-actions a[href=""], .account-receipt a[href=""],
.account-receipt-line p:empty, .account-refund-mark:empty { display: none; }
.account-receipt { margin-bottom: 20px; padding: 22px; border: 1px solid var(--ab); border-radius: 8px; background: #fffdf8; }
.account-receipt-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--ab); }
.account-receipt-heading h3 { margin: 6px 0 0; font: 700 18px/1.5 var(--font-body); letter-spacing: 0; }
.account-receipt-heading h3 span { display: block; }
.account-receipt-heading > p { margin: 0; font-size: 14px; text-align: right; line-height: 1.6; }
.account-order-state { display: block; font-weight: 700; color: var(--olive); }
.account-receipt[data-order-status="refunded"] .account-order-state,
.account-receipt[data-order-status="partially_refunded"] .account-order-state { color: var(--berry); }
.account-receipt-lines { margin: 0; padding: 0; list-style: none; }
.account-receipt-line { padding: 20px 0; border-bottom: 1px solid var(--ab); }
.account-line-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.account-line-top h4 { margin: 0; font: 700 16px/1.5 var(--font-body); overflow-wrap: anywhere; }
.account-money { font-size: 16px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
.account-refund-mark { color: var(--berry); }
.account-page .account-line-unit { margin: 4px 0 0; font-size: 14px; }
.account-line-admission, .account-line-included { margin-top: 14px; }
.account-receipt h5 { margin: 0 0 4px; font-size: 14px; }
.account-line-admission p, .account-line-included p { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.account-page .account-receipt-totals { display: block; margin: 0; padding: 20px 0; border: 0; }
.account-receipt-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 16px; line-height: 1.5; }
.account-receipt-totals > div:first-child { font-size: 20px; font-weight: 700; }
.account-receipt-totals dd { flex-shrink: 0; margin: 0; font-variant-numeric: tabular-nums; }
.account-receipt-pickup { padding: 18px; border: 1px solid var(--ab); border-radius: 4px; background: var(--paper); }
.account-receipt-pickup h4 { margin: 0 0 8px; font-size: 16px; }
.account-receipt-pickup ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.account-receipt-pickup p { margin: 8px 0 0; font-size: 14px; }
.account-receipt-footer { margin-top: 10px; font-size: 14px; }
.account-dashboard .account-help { font-size: 14px; }
.account-dashboard .account-security form { padding: 0; border: 0; background: none; }
@media (min-width: 760px) {
  .account-pass-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-pass-face { padding: 24px; }
  .account-receipt { padding: 28px; }
}
@media (max-width: 480px) {
  .account-receipt { padding: 18px; }
  .account-receipt-heading { flex-direction: column; gap: 8px; }
  .account-receipt-heading > p { text-align: left; }
  .account-order-state { display: inline; margin-left: 12px; }
  .account-line-top { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Keep long account details inside the mobile strip and keyboard targets visible. */
.account-dashboard .account-identity { max-width: 100%; }
.account-dashboard .account-identity p { min-width: 0; }
.account-dashboard .account-security strong { overflow-wrap: anywhere; }
.account-dashboard .account-pass-checked { white-space: pre-line; line-height: 1.6; }
.account-dashboard .account-calendar { text-decoration: underline; }
.account-dashboard .account-pass-heading { grid-template-columns: minmax(0, 1fr); }
.account-dashboard .account-pass-heading .ticket-status { justify-self: start; }
.account-dashboard .account-pass-validity h4 { font-family: var(--font-body); }

/* Session 21 (Astra): compact cards and the native receipt disclosure. */
.account-dashboard .account-section-heading { margin-bottom: 12px; padding-bottom: 10px; }
.account-collection + .account-collection { margin-top: 28px; }
.account-pass-list { gap: 12px; }
.account-pass[data-ticket-kind="earlybird_vip"] { --account-treatment: repeating-linear-gradient(45deg, #111 0 1mm, #fff 1mm 4mm); }
.account-pass-face { padding: 12px; }
.account-dashboard .account-pass-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
}
.account-pass-heading .account-pass-event { grid-column: 1; grid-row: 1; }
.account-dashboard .account-pass-heading .ticket-status { grid-column: 2; grid-row: 1; justify-self: end; padding: 3px 7px; font-size: 12px; }
.account-pass-heading h3 { grid-column: 1; grid-row: 2; font-size: 18px; line-height: 1.2; }
.account-page .account-pass-heading .account-reference { grid-column: 2; grid-row: 2; margin: 0; font-size: 11px; line-height: 1.4; text-align: right; }
.account-pass-heading .account-reference span { display: block; }
.account-pass-validity { margin-top: 8px; padding: 8px 0; }
.account-pass h4 { margin-bottom: 4px; font-size: 14px; }
.account-validity-lines { display: grid; gap: 4px; }
.account-validity-lines p { font-size: 14px; line-height: 1.35; }
/* One line on the card, so the engine joins the card's INCLUSIONS with " · "
   (src/http/account-routes.mjs, inclusionText). The receipt line keeps one per line. */
.account-page .account-pass-inclusions { margin: 8px 0; line-height: 1.4; white-space: normal; }
.account-page .account-pass-checked { margin-bottom: 8px; line-height: 1.4; }
.account-pass-actions { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding-top: 0; }
.account-pass-actions .button, .account-pass-actions .account-secondary { min-height: 44px; padding: 8px; font-size: 14px; }
.account-pass-actions .account-calendar { grid-column: auto; justify-self: stretch; align-items: center; justify-content: center; padding: 8px 4px; font-size: 13px; text-align: center; }
.account-receipt:has(.account-receipt-details) { padding: 0; margin-bottom: 10px; }
.account-receipt-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto 12px;
  align-items: center;
  gap: 10px 20px;
  min-height: 64px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.account-receipt-summary::-webkit-details-marker { display: none; }
.account-receipt-summary::after { content: "+"; font-size: 20px; line-height: 1; text-align: center; }
.account-receipt-details[open] > .account-receipt-summary::after { content: "−"; }
.account-receipt-summary:hover { background: var(--as); }
.account-receipt-summary:focus-visible { outline-offset: -4px; border-radius: 7px; }
.account-receipt-summary h3 { margin: 0; font: 700 14px/1.4 var(--font-body); letter-spacing: 0; }
.account-receipt-summary h3 span { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }
.account-receipt-summary time, .account-receipt-summary .account-order-state { margin: 0; font-size: 13px; line-height: 1.4; }
.account-receipt-summary .account-money { font-size: 14px; }
.account-receipt-body { padding: 12px 16px 16px; border-top: 1px solid var(--ab); }
.account-receipt-body .account-receipt-line { padding: 12px 0; }
.account-receipt-body .account-line-admission, .account-receipt-body .account-line-included { margin-top: 8px; }
.account-page .account-receipt-body .account-receipt-totals { padding: 12px 0; }
.account-receipt-body .account-receipt-pickup { padding: 12px; }
@media (max-width: 600px) {
  .account-receipt-summary { grid-template-columns: minmax(0, 1fr) auto 12px; gap: 4px 10px; padding: 12px; }
  .account-receipt-summary h3 { grid-column: 1; grid-row: 1; font-size: 12px; }
  .account-receipt-summary .account-money { grid-column: 2; grid-row: 1; }
  .account-receipt-summary time { grid-column: 1; grid-row: 2; }
  .account-receipt-summary .account-order-state { grid-column: 2; grid-row: 2; max-width: 12ch; text-align: right; }
  .account-receipt-summary::after { grid-column: 3; grid-row: 1 / 3; }
}
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
  @media (prefers-reduced-motion: no-preference) {
    .account-receipt-details { interpolate-size: allow-keywords; }
    .account-receipt-details::details-content { block-size: 0; overflow: clip; transition: block-size 180ms ease, content-visibility 180ms allow-discrete; }
    .account-receipt-details[open]::details-content { block-size: auto; }
  }
}

.account-summary-total-label { display:block; font-size:11px; font-weight:400; line-height:1.4; white-space:normal; }

/* Review finding 1: below 390 px the forced three columns starve the primary button (39x129 px at
   320 px, one character per line). The calendar link takes its own row again, as on main. */
@media (max-width: 389px) {
  .account-pass-actions { grid-template-columns: minmax(0, 1fr) auto; }
  .account-pass-actions .account-calendar { grid-column: 1 / -1; justify-self: start; }
}

/* Session 22 (Astra): sharing one ticket, searching by the name on it, and the group of tickets
   somebody shared with this buyer. Session 21's compact card above stays the one compact ruleset
   (review-session22.md, blocking item 3): Astra's duplicate `.account-pass-compact` block is not
   taken, and what follows is re-scoped off that class so it applies to the card as session 21
   draws it. */
.account-share { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ab); }
.account-share summary { min-height: 44px; padding: 10px 0; color: var(--olive); font-size: 14px; font-weight: 700; cursor: pointer; }
.account-share :is(form, .account-share-person), .account-ticket-search { margin: 0; padding: 0; border: 0; background: transparent; max-width: none; }
.account-share-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.account-share-fields label { min-width: 0; font-size: 14px; font-weight: 700; }
.account-share-fields input, .account-ticket-search input[type="search"] { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 4px; padding: 10px; border: 1px solid #887b6e; border-radius: 6px; background: #fff; color: var(--ai); font: inherit; font-size: 16px; }
.account-share-fields [aria-invalid="true"] { border: 2px solid var(--berry); }
.account-share .button { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.account-share-person, .account-shared-from { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.account-share-controls { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.account-share-link { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--olive); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.account-share-link:disabled { opacity: .6; cursor: wait; }
.account-page .account-share-help { margin: 0 0 10px; color: #514b42; font-size: 14px; line-height: 1.5; }
/* Only the "shared with" line and the resend / remove controls are state dependent. The editor
   stays reachable in both states so a mistyped recipient can be corrected in one step rather than
   through Ta bort and Dela again (review-session22.md, finding 4); its summary says which it is. */
.account-share[data-share-state="none"] .account-share-current,
.account-ticket-search:not([data-search-enabled="true"]) { display: none; }
.account-ticket-search { margin-bottom: 20px; }
.account-ticket-search > label { font-size: 16px; font-weight: 700; }
.account-ticket-search > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.account-ticket-search input[type="search"] { flex: 1 1 220px; width: auto; }
.account-ticket-search .button { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.account-ticket-search a { display: inline-flex; align-items: center; min-height: 44px; color: var(--olive); }
.account-ticket-search p { margin: 6px 0 0; font-size: 14px; color: #514b42; }
.account-shared-from { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--ab); }
@media (max-width: 480px) {
  .account-share-fields { grid-template-columns: minmax(0, 1fr); }
}
/* A ticket that can no longer be sent to anybody still shows who it was shared with, and still
   offers Ta bort: the holder row feeds the festival mailing and the admin search until the buyer
   takes it off. Only the two controls that would send mail go. */
.account-share[data-share-sendable="false"] :is(.account-share-editor, [data-ticket-share="resend"]) { display: none; }

/* Ticket states, 21 September 2026 (Marcus). Only an active ticket gets a card; a checked-in,
   refunded or cancelled one is a single muted row inside a group that is shut on arrival. The
   disclosure borrows the receipt summary's language (a plain `<details>`, its own marker, no
   script) so the page has one way of folding things away rather than two. */
.account-past-tickets { margin-top: 20px; border: 1px solid var(--ab); border-radius: 9px; background: var(--as); }
.account-past-summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px;
  color: var(--ai); font: 800 14px/1.4 var(--font-body); cursor: pointer; list-style: none;
}
.account-past-summary::-webkit-details-marker { display: none; }
.account-past-summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; }
.account-past-tickets[open] > .account-past-summary::after { content: "−"; }
.account-past-summary:hover { background: var(--ac); }
.account-past-summary:focus-visible { outline-offset: -4px; border-radius: 8px; }
/* One row per line at every width. `.account-pass-list` goes to two columns on a wide screen for
   the CARDS; a row is a line of text and reads as a list, not as a pair of tiles. */
.account-past-list { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 12px 12px; }

.account-pass-row { min-width: 0; border-top: 1px solid var(--ab); background: #fff; }
.account-pass-row:first-child { border-top: 0; }
.account-pass-row-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center;
  gap: 4px 14px; min-height: 48px; padding: 10px 12px; color: var(--ai);
  font-size: 14px; line-height: 1.4; text-decoration: none;
}
.account-pass-row-link:hover { background: var(--as); }
.account-pass-row-link:focus-visible { outline-offset: -3px; border-radius: 7px; }
.account-pass-row-name { min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.account-pass-row-order { color: #60584f; font-family: ui-monospace, monospace; font-size: 13px; overflow-wrap: anywhere; }
.account-pass-row-view { color: var(--olive); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.account-pass-row .ticket-status { font-size: 12px; line-height: 1.35; white-space: nowrap; }

/* The chip reads off the buyer-facing state, which is the four-way one. The three `data-status`
   rules above stay where they are: they still colour the card. */
[data-ticket-state="active"] .ticket-status { background: #edf0dc; color: #3c431e; }
[data-ticket-state="checked_in"] .ticket-status { background: #efede8; color: #514b42; }
[data-ticket-state="refunded"] .ticket-status,
[data-ticket-state="cancelled"] .ticket-status { background: #f7e9ed; color: var(--berry); }

/* Phone: the row keeps one line for the name and its state, and folds the order number and the
   link under it rather than squeezing four columns into 320 px. */
@media (max-width: 600px) {
  .account-past-list { padding: 0 8px 8px; }
  .account-pass-row-link { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px; }
  .account-pass-row-name { grid-column: 1; grid-row: 1; }
  .account-pass-row .ticket-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .account-pass-row-order { grid-column: 1; grid-row: 2; }
  .account-pass-row-view { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* "Delad med <name> · Ta bort" on a past row that names somebody. It sits outside the row's anchor
   (a form inside a link is neither valid nor operable) and reads as a second, quieter line.
   Two classes deep on purpose: engine-pages.css draws every `.engine-page form` as a bordered white
   grid card, which this is not, and that selector outranks a single class. The same reason
   `.account-share :is(form, …)` above is scoped the way it is. */
.account-pass-row .account-row-share {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px;
  max-width: none; margin: 0; padding: 0 12px 10px;
  border: 0; border-radius: 0; background: transparent;
  color: #514b42; font-size: 13px; line-height: 1.5;
}
.account-row-shared { min-width: 0; overflow-wrap: anywhere; }
.account-row-sep { color: #8d867c; }
.account-pass-row .account-row-share .account-share-link { min-height: 36px; padding: 2px 0; font-size: 13px; }
.account-pass-row .account-row-share .action-feedback { flex-basis: 100%; margin: 4px 0 0; }
@media (max-width: 600px) {
  .account-pass-row .account-row-share { padding: 0 10px 10px; }
  /* A touch target keeps its 44 px on a phone, so the control gains a line rather than losing size. */
  .account-pass-row .account-row-share .account-share-link { min-height: 44px; }
}

/* Hand over (Marcus, 24 September 2026). Sending a ticket to somebody else gives it a new QR code,
   so the form says so above its button, and a script-enabled page asks once more in a native modal
   dialog (web/account-ticket-share.mjs). A ticket that has been used, or whose day is over, shows
   one plain sentence instead of the form. Design polish is Astra's (audit.md, Design hand-off). */
.account-page .account-share-warning { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--olive); background: var(--as); color: var(--ai); font-size: 14px; line-height: 1.5; }
.account-share-blocked, .account-row-note { margin: 8px 0 0; color: #514b42; font-size: 14px; line-height: 1.5; }
.account-share-blocked:empty { display: none; }
/* Final: a ticket somebody else holds offers no editor, only "Skicka igen" (Marcus, 24 Sep 2026). */
.account-share[data-share-state="handed_over"] .account-share-editor { display: none; }
.account-pass-row .account-row-note { margin: 0; padding: 0 12px 10px; font-size: 13px; }
.account-confirm { width: min(92vw, 440px); padding: 0; border: 1px solid var(--ab); border-radius: 10px; background: #fffdf8; color: var(--ai); }
.account-confirm::backdrop { background: rgba(20, 18, 14, .55); }
.account-confirm form { display: grid; gap: 12px; max-width: none; margin: 0; padding: 22px; border: 0; background: transparent; }
.account-confirm h2 { margin: 0; font: 800 20px/1.3 var(--font-body); letter-spacing: 0; }
.account-confirm p { margin: 0; font-size: 16px; line-height: 1.5; }
.account-confirm p:empty { display: none; }
.account-confirm #account-confirm-text { display: grid; gap: 8px; }
.account-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.account-confirm-actions .button { min-height: 44px; padding: 8px 16px; font-size: 16px; }

/* The public ticket check (/sv/kontrollera-biljett, /en/check-ticket) and the "passed on" page an
   old ticket link opens. Same state card as the other account entry pages. */
.ticket-check-result { margin: 18px 0; padding: 14px 16px; border: 1px solid var(--ab); border-radius: 8px; background: #fff; text-align: left; }
.ticket-check-result[data-check-state=""] { display: none; }
.ticket-check-result h2 { margin: 0 0 6px; font: 800 20px/1.3 var(--font-body); letter-spacing: 0; }
.ticket-check-result p { margin: 0; font-size: 16px; line-height: 1.5; }
.ticket-check-result p:empty { display: none; }
.ticket-check-result[data-check-state="valid"] { border-left: 4px solid var(--olive); }
.ticket-check-result:is([data-check-state="used"], [data-check-state="passed_on"], [data-check-state="void"], [data-check-state="not_found"]) { border-left: 4px solid var(--berry); }
.ticket-check-page .ticket-check-form { display: grid; gap: 8px; max-width: 520px; margin: 18px 0; text-align: left; }
.ticket-check-form label { font-weight: 700; }
.ticket-check-form input { min-height: 48px; padding: 10px; border: 1px solid #887b6e; border-radius: 6px; font: inherit; font-size: 16px; }
.ticket-check-help, .ticket-check-tip p { margin: 0; color: #514b42; font-size: 14px; line-height: 1.5; }
.ticket-check-tip { max-width: 520px; margin: 8px 0 18px; text-align: left; }
.ticket-check-tip h2 { margin: 0 0 6px; font: 800 16px/1.4 var(--font-body); letter-spacing: 0; }
.ticket-check-tip p + p { margin-top: 6px; }

/* One product, one card. The same paper, fine border and olive controls as tickets and Outbid. */
.account-tshirt-sizes { margin-top: 24px; scroll-margin-top: 24px; }
.account-tshirt-sizes > h3 { margin: 0 0 4px; color: #60584f; font: 400 14px/1.5 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.account-merch-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.account-merch-line { grid-column: 1 / -1; margin: 0; font: 700 16px/1.5 var(--font-body); letter-spacing: 0; overflow-wrap: anywhere; }
.account-merch-line:not(:first-child) { margin-top: 12px; }
.account-merch-line:empty { display: none; }
.account-merch-row { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ab); border-radius: 10px; background: var(--ac); }
.account-merch-gallery { min-width: 0; overflow: hidden; border-radius: 9px 9px 0 0; background: #fff; }
.account-merch-track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.account-merch-gallery.is-enhanced .account-merch-track { scrollbar-width: none; }
.account-merch-gallery.is-enhanced .account-merch-track::-webkit-scrollbar { display: none; }
.account-merch-photo { position: relative; display: block; flex: 0 0 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: #fff; cursor: zoom-in; }
.account-merch-photo img { position: absolute; display: block; width: 200%; max-width: none; height: auto; left: 0; top: 0; }
.account-merch-photo[data-merch-side="right"] img { left: -100%; }
.account-merch-tshirt img { top: -52%; }
.account-merch-cap img { top: -16.6667%; }
.account-merch-glasses img { top: -6.25%; }
/* The supplied GOLD photo shows cap and shirt together. Frame the original cap at its full width. */
.account-merch-gold-cap img { width: 300%; top: -30%; left: -25%; }
.account-merch-gold-cap[data-merch-side="right"] img { top: 0; left: -190%; }
.account-merch-gallery-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 6px 16px; border-block: 1px solid var(--ab); background: var(--ac); }
.account-merch-views { display: flex; gap: 4px; }
.account-merch-views button { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 5px; background: transparent; color: #60584f; font-size: 14px; font-weight: 700; }
.account-merch-views button[aria-pressed="true"] { background: var(--as); color: var(--ai); }
.account-merch-views button:hover { color: var(--olive); }
.account-merch-zoom-hint { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: #60584f; font-size: 14px; text-decoration: none; }
.account-merch-zoom-hint:hover { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.account-merch-body { display: flex; flex: 1; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; }
.account-merch-heading { display: grid; justify-items: start; gap: 10px; }
.account-page .account-merch-variant { margin: 0; color: #60584f; font-size: 13px; font-weight: 700; line-height: 1.4; }
.account-page .account-merch-variant.is-gold { padding: 4px 8px; border: 1px solid #c3a36e; border-radius: 4px; background: #f4e8cd; color: #674617; letter-spacing: .08em; }
.account-merch-name { margin: 0; color: var(--ai); font: 700 20px/1.3 var(--font-body); letter-spacing: -.02em; overflow-wrap: anywhere; }
.account-page .account-merch-current { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin: 0; color: #60584f; font-size: 16px; line-height: 1.5; }
.account-merch-size { color: var(--ai); font-size: 20px; font-weight: 700; }
.account-merch-row .account-tshirt-size { display: grid; gap: 8px; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.account-tshirt-size label { font-size: 14px; }
.account-merch-size-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-merch-row .account-tshirt-size select { flex: 1; width: 0; min-width: 100px; min-height: 48px; margin: 0; padding: 10px 12px; border: 1px solid #887b6e; border-radius: 7px; background: #fff; color: var(--ai); font: inherit; font-size: 16px; }
.account-merch-row .button { min-height: 48px; margin: 0; padding: 10px 18px; font-size: 16px; line-height: 1.4; text-align: center; }
.account-merch-notes { display: grid; gap: 16px; margin-top: auto; min-width: 0; }
.account-merch-notes p { margin: 0; color: #60584f; font-size: 14px; line-height: 1.5; }
.account-merch-notes p:empty { display: none; }
.account-merch-row .account-merch-swap { display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.account-page .button.account-merch-secondary { width: 100%; border: 1px solid var(--olive); background: transparent; color: var(--olive); font-size: 14px; }
.account-page .button.account-merch-secondary:hover { background: #e8e9d8; }
.account-tshirt-sizes > .action-feedback:empty { display: none; }
.account-confirm .account-merch-preview { display: block; width: 100%; height: 180px; object-fit: contain; }
.account-merch-lightbox { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--ab); border-radius: 12px; background: var(--ac); color: var(--ai); }
.account-merch-lightbox::backdrop { background: rgb(20 18 14 / 72%); }
.account-merch-lightbox-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; }
.account-merch-lightbox h2 { margin: 0; font: 700 16px/1.4 var(--font-body); letter-spacing: 0; }
.account-merch-close { flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid var(--ab); border-radius: 7px; background: transparent; color: var(--ai); font-size: 14px; font-weight: 700; }
.account-merch-lightbox .account-merch-gallery { border-radius: 0; }
.account-merch-lightbox .account-merch-track { width: min(100%, calc(100dvh - 170px)); margin-inline: auto; }
.account-merch-lightbox .account-merch-photo { cursor: default; }
.account-merch-lightbox .account-merch-gallery-bar { justify-content: center; border-bottom: 0; }
@media (max-width: 639px) {
  .account-merch-lightbox { width: calc(100% - 16px); max-width: none; }
}
@media (min-width: 640px) {
  .account-merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .account-merch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 360px) {
  .account-merch-body { padding: 20px; }
}

/* Session 122: the account follows the same compact paper-card rhythm as merchandise. */
.account-dashboard .account-outbid.ob-account-workspace { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
/* The Outbid tab until /outbid.js paints it (owner 18 Oct 2026: it showed an empty box under the green bar): the
   workspace's own heading and two quiet placeholders. account-tabs.mjs offers a reload if the script never paints. */
.account-dashboard .account-outbid:has(> .ob-account-loading) { margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.account-dashboard .ob-account-loading > .ob-eyebrow { margin:0 0 6px; font-size:12px; }
.account-dashboard .ob-account-loading > h2 { margin:0 0 6px; font:700 26px/1.2 var(--font-body); }
.account-dashboard .ob-account-loading > p { margin:0 0 12px; font-size:14px; }
.account-dashboard .ob-account-loading > span { display:block; height:46px; margin:0 0 16px; border-radius:8px; background:var(--as); animation:account-outbid-loading 1.4s ease-in-out infinite alternate; }
.account-dashboard .ob-account-loading > span + span { height:220px; border-radius:10px; animation-delay:.2s; }
.account-dashboard .ob-account-loading > .button { margin-top:4px; }
@keyframes account-outbid-loading { from { opacity:1; } to { opacity:.45; } }
@media (scripting: none) { .ob-account-loading { display:none; } }
.account-dashboard .ob-account-workspace > .ob-eyebrow { margin:0 0 6px; font-size:12px; }
.account-dashboard .ob-account-workspace > h2 { margin:0 0 6px; font:700 26px/1.2 var(--font-body); }
.account-dashboard .ob-account-workspace > p { margin:0 0 12px; font-size:14px; }
.account-dashboard .ob-account-race-details { margin:0 0 16px; padding:0 18px; border:1px solid var(--ab); border-radius:8px; background:var(--ac); }
.account-dashboard .ob-account-race-details .ob-races { margin:0 0 16px; }
.account-dashboard .ob-account-steps { border:1px solid var(--ab); border-radius:10px; background:var(--ac); }
.account-dashboard .ob-account-step { min-width:0; margin:0; padding:18px 22px; border-top:1px solid var(--ab); scroll-margin-top:24px; }
.account-dashboard .ob-account-step:first-child { border-top:0; }
.account-dashboard .ob-account-steps > .ob-photo > .ob-account-step { border-top:1px solid var(--ab); }
.account-dashboard .ob-account-step-heading { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:10px; }
.account-dashboard .ob-account-step-number { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--ab); border-radius:50%; color:var(--olive); background:var(--paper); font-size:14px; font-weight:800; }
.account-dashboard .ob-account-step-heading h3 { margin:0; color:var(--ai); font:700 17px/1.4 var(--font-body); letter-spacing:0; }
.account-dashboard .ob-account-step-state { display:inline-block; padding:3px 8px; border-radius:4px; background:var(--as); color:#60584f; font-size:12px; font-weight:700; white-space:nowrap; }
.account-dashboard .ob-account-step[data-done="true"] .ob-account-step-state { background:#edf0dc; color:var(--olive); }
.account-dashboard .ob-account-step[data-done="true"] .ob-account-step-number { border-color:#b7bfa0; background:#edf0dc; }
.account-dashboard .ob-account-step p { max-width:none; margin:6px 0; font-size:14px; line-height:1.5; }
.account-dashboard .ob-account-step .ob-actions { margin:10px 0 0; }
.account-dashboard .ob-account-step .ob-button { min-height:44px; padding:9px 16px; font-size:14px; }
.account-dashboard .ob-account-more > summary { display:list-item; min-height:44px; padding:10px 0; color:var(--olive); font-size:14px; font-weight:700; }
.account-dashboard .ob-account-more > p,.account-dashboard .ob-account-more > div { margin:6px 0 12px; }
.account-dashboard .ob-account-workspace .ob-account-rules { margin:6px 0 12px; }
.account-dashboard .account-outbid.ob-account-workspace .ob-photo { max-width:none; margin:0; padding:0; border:0; }
.account-dashboard .ob-account-workspace .ob-photo-bonus { margin:0 0 4px; padding:0; background:transparent; border-radius:0; font-size:14px; }
.account-dashboard .ob-account-workspace .ob-photo-bonus p { margin:4px 0; font-size:14px; }
.account-dashboard .ob-account-workspace .ob-photo-bonus .ob-account-more > summary { padding-block:6px; }
.account-dashboard .ob-account-workspace .ob-photo-tips { margin:0; padding:0; border:0; background:transparent; }
.account-dashboard .ob-account-workspace .ob-background-guide { margin:0; }
.account-dashboard .ob-account-workspace .ob-background-guide > summary { padding-block:6px; }
.account-dashboard .ob-account-workspace .ob-photo-editor { grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr); gap:18px; margin:12px 0 0; }
.account-dashboard .ob-account-workspace .ob-photo-stage { position:static; }
.account-dashboard .ob-account-workspace .ob-photo-poster { max-width:240px; margin:0 auto; }
.account-dashboard .account-outbid .ob-account-steps .ob-photo-controls { max-width:none; margin:0; padding:0; gap:10px; border:0; border-radius:0; background:transparent; }
.account-dashboard .ob-account-workspace .ob-photo-side { gap:8px; }
.account-dashboard .ob-account-workspace .ob-photo-when:empty,.account-dashboard .ob-account-workspace .ob-photo-status:empty { display:none; }
.account-dashboard .ob-account-workspace .ob-photo-file { flex:1; }
.account-dashboard .ob-account-workspace .ob-photo-consent { margin:8px 0; }
.account-dashboard .ob-account-skin-catalogue { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; padding:8px 0; }
.account-dashboard .ob-account-skin-catalogue > .ob-character-picker { grid-column:1; grid-row:1; }
.account-dashboard .ob-account-skin-catalogue > .ob-hat-picker { grid-column:2; grid-row:1; }
.account-dashboard .ob-account-skin-catalogue > :is(.ob-face-filter,.ob-filter-help,.ob-account-more,.ob-character-save) { grid-column:1/-1; }
.account-dashboard .ob-account-workspace .ob-character-picker,.account-dashboard .ob-account-workspace .ob-hat-picker { min-width:0; margin:0; padding:0; border:0; }
.account-dashboard .ob-account-workspace .ob-character-picker legend,.account-dashboard .ob-account-workspace .ob-hat-picker legend { margin:0 0 8px; font-size:15px; }
.account-dashboard .ob-account-workspace .ob-character-list,.account-dashboard .ob-account-workspace .ob-hat-list { grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); max-height:264px; gap:8px; padding:4px; }
.account-dashboard .ob-account-skin-catalogue .ob-character-save { justify-self:start; margin:0; }
.account-dashboard .ob-account-steps .ob-standalone-skins { max-width:none; margin:0; padding:0; border:0; }
.account-dashboard .account-outbid.ob-account-workspace .ob-account-settings { max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.account-dashboard .ob-account-step .ob-account-settings .ob-field { max-width:520px; margin:8px 0 0; font-size:14px; }
.account-dashboard .ob-account-step .ob-account-settings #ob-nickname-help { margin:0 0 4px; }
.account-dashboard .ob-account-step .ob-account-settings .ob-account-emails { margin:0; padding:0; border:0; }
.account-dashboard .ob-account-step .ob-account-settings .ob-check { min-height:44px; padding:6px 0; font-size:14px; }
.account-dashboard .ob-account-step .ob-account-settings .ob-figure-note { margin:0; padding:0; border:0; background:transparent; }
.account-dashboard .ob-account-step .ob-account-settings .ob-figure-choice { margin:0 0 12px; }
.account-dashboard .ob-account-step .ob-account-settings .ob-figure-option { width:108px; }
.account-dashboard .ob-account-step .ob-account-settings .ob-figure-option img { width:76px; }
.account-dashboard .ob-account-step .ob-account-settings > button { justify-self:start; margin-top:8px; }
.account-dashboard .account-outbid.ob-account-workspace .ob-share-link { margin:0; padding:0; border:0; }
.account-dashboard .ob-account-step .ob-share-link .ob-field { max-width:none; font-size:14px; }
.account-dashboard .ob-account-step .ob-share-link .ob-share-url { min-height:44px; font-size:14px; }
.account-dashboard .ob-account-step .ob-share-link form { max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; }
.account-dashboard .ob-account-step .ob-share-status:empty { display:none; }
.account-dashboard .ob-account-step .ob-gang-entry { margin:12px 0 0; padding:12px 0 0; border:0; border-top:1px solid var(--ab); border-radius:0; background:transparent; }
.account-dashboard .ob-account-step .ob-gang-entry h3 { margin:0 0 6px; font-size:16px; }
.account-dashboard .ob-account-step .ob-gang-account { margin:12px 0 0; }
.account-dashboard .account-outbid.ob-account-workspace .ob-remove { margin:16px 0 0; padding:0; border:0; font-size:14px; }
.account-dashboard .ob-account-faq { margin-top:8px; font-size:14px; }
.account-page .ob-account-explainer { width:min(800px,calc(100vw - 32px)); }
.account-page .ob-account-explainer-copy p { margin:8px 0; font-size:14px; line-height:1.5; }
.account-page .ob-account-explainer-copy > a { display:inline-flex; align-items:center; min-height:44px; color:var(--olive); font-size:14px; font-weight:700; }
.account-page .ob-account-guide-dialog { width:min(560px,calc(100vw - 32px)); }
.account-page .ob-account-guide-dialog dl { display:block; margin:12px 0; padding:0; border:0; font-size:14px; line-height:1.5; }
.account-page .ob-account-guide-dialog dt { margin:14px 0 4px; font-weight:700; }
.account-page .ob-account-guide-dialog dd { margin:0; }
.account-page .ob-account-guide-dialog p { font-size:14px; line-height:1.5; }
@media (max-width:760px) {
  .account-dashboard .ob-account-step { padding:16px; }
  .account-dashboard .ob-account-step-heading { gap:8px; grid-template-columns:28px minmax(0,1fr); align-items:start; }
  .account-dashboard .ob-account-step-heading h3 { align-self:center; font-size:16px; }
  .account-dashboard .ob-account-step-number { width:28px; height:28px; }
  .account-dashboard .ob-account-step-state { grid-column:2; justify-self:start; margin-top:-2px; }
  .account-dashboard .ob-account-workspace .ob-photo-editor { grid-template-columns:minmax(0,1fr); gap:14px; }
  .account-dashboard .ob-account-workspace .ob-photo-poster { max-width:210px; }
  .account-dashboard .ob-account-skin-catalogue { grid-template-columns:minmax(0,1fr); gap:12px; }
  .account-dashboard .ob-account-skin-catalogue > .ob-hat-picker { grid-column:1; grid-row:auto; }
  .account-dashboard .ob-account-workspace .ob-character-list,.account-dashboard .ob-account-workspace .ob-hat-list { max-height:238px; }
}

/* Table bookings are cards, not the festival ticket row grid. */
.barski-account-bookings { margin-top: 28px; min-width: 0; }
.barski-account-list { display: grid; gap: 18px; }
.barski-account-card { min-width: 0; padding: 24px; border: 1px solid var(--ab); border-radius: 10px; background: var(--ac); }
.barski-account-card-heading > div { min-width: 0; }
.barski-account-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.account-page .barski-account-card h3 { margin: 0; font: 800 22px/1.35 var(--font-body); letter-spacing: -.025em; overflow-wrap: normal; }
.barski-account-card h3::first-letter { text-transform: uppercase; }
.account-page .barski-account-time { margin: 5px 0 0; font-size: 26px; line-height: 1.3; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barski-account-status { flex-shrink: 0; max-width: 46%; padding: 6px 10px; border: 1px solid var(--olive); border-radius: 20px; color: var(--olive); font-size: 13px; line-height: 1.5; font-weight: 750; }
.account-page .barski-account-guests { margin: 14px 0; font-weight: 700; }
.barski-account-details { margin: 16px 0; color: #514b42; }
.barski-account-details summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-weight: 700; text-underline-offset: 4px; }
.barski-account-details summary:hover { color: var(--olive); text-decoration: underline; }
.account-page .barski-account-details p, .account-page .barski-account-actions p { margin: 8px 0; font-size: 14px; line-height: 1.6; }
.barski-account-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ab); }
.barski-account-actions:empty { display: none; }
.barski-account-actions form { flex: 1 1 270px; max-width: 420px; margin: 0; padding: 0; border: 0; background: transparent; }
.barski-account-actions label { display: block; font-size: 14px; font-weight: 700; }
.barski-account-actions select { display: block; width: 100%; min-height: 46px; margin: 6px 0 10px; padding: 10px 12px; border: 1px solid #887b6e; border-radius: 6px; background: #fff; color: var(--ai); font: inherit; font-size: 16px; }
.barski-account-actions button { min-height: 48px; padding: 10px 20px; border: 2px solid var(--olive); border-radius: 7px; background: var(--olive); color: var(--paper); font-weight: 800; transition: background .16s ease, transform .16s ease; }
.barski-account-actions .barski-account-cancel { flex: 0 0 auto; margin-left: auto; }
.barski-account-cancel button { color: var(--berry); background: transparent; border-color: var(--berry); }
.barski-account-actions button:hover { filter: brightness(.9); }
.barski-account-actions button:active { transform: translateY(1px); }
.barski-account-card :is(button,select,summary):focus-visible { outline: 3px solid var(--berry); outline-offset: 4px; }
.barski-account-notice { padding: 12px 14px; background: var(--as); border-radius: 6px; }
/* Optional event updates: a quiet card under the bookings, same card language, one clear button. */
.barski-account-updates { margin-top: 18px; padding: 20px 24px; border: 1px solid var(--ab); border-radius: 10px; background: var(--ac); }
.account-page .barski-account-updates h3 { margin: 0 0 6px; font: 800 18px/1.4 var(--font-body); letter-spacing: -.02em; }
.account-page .barski-account-updates p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.barski-account-updates form { max-width: none; justify-items: start; margin: 0; padding: 0; border: 0; background: transparent; }
/* The event updates button is the gift section's button (owner 18 Oct 2026): opting in is its primary, opting out
   the quieter secondary. */
.barski-account-updates button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 13px 18px; border: 1px solid #4c5229; border-radius: 5px; background: #4c5229; color: #fff8ee; font: 700 13px/1.4 Arial, Helvetica, sans-serif; text-align: center; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; }
.barski-account-updates [data-event-updates-state="on"] + form button { border-color: #a89a8b; background: transparent; color: #4c5229; }
@media (hover: hover) {
  .barski-account-updates button:hover { border-color: #383e1e; background: #383e1e; }
  .barski-account-updates [data-event-updates-state="on"] + form button:hover { border-color: #4c5229; background: #f3ebdd; }
}
.barski-account-updates button:focus-visible { outline: 3px solid #2879c8; outline-offset: 4px; }
@media (max-width: 600px) { .barski-account-updates { padding: 18px; } .barski-account-updates button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .barski-account-updates button { transition: none; } }
@media (max-width: 600px) {
 .barski-account-card { padding: 18px; }
 .barski-account-card-heading { flex-direction: column; gap: 12px; }
 .account-page .barski-account-card h3 { font-size: 20px; }
 .barski-account-status { max-width: 100%; }
 .barski-account-actions form { max-width: none; }
 .barski-account-actions .barski-account-cancel { margin-left: 0; }
 .barski-account-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .barski-account-actions button { transition: none; } }
/* Progressive actions preserve the hotfix booking-card layout. */
.account-barski-heading { flex-wrap:wrap; align-items:center; }
.account-barski-heading > div { min-width:0; }
.account-barski-heading p { margin:8px 0 0; font-size:16px; }
.account-barski-heading .button { flex-shrink:0; }
.account-barski-wishes { white-space:pre-wrap; overflow-wrap:anywhere; }
.barski-account-actions > details { flex:1 1 270px; min-width:0; }
.barski-account-actions summary { width:fit-content; min-height:48px; padding:13px 0; color:var(--olive); cursor:pointer; font-size:16px; font-weight:700; }
.barski-account-actions .barski-action-cancel > summary { color:var(--berry); }
.barski-account-actions summary:hover { text-decoration:underline; text-underline-offset:4px; }
.barski-account-actions [data-barski-feedback] { padding:12px; border-left:3px solid var(--berry); background:var(--as); overflow-wrap:anywhere; }
.barski-account-actions [hidden] { display:none!important; }
.account-barski-refresh { display:inline-flex; min-height:44px; align-items:center; color:var(--olive); font-size:15px; font-weight:700; }
@media(max-width:520px) { .account-barski-heading .button { width:100%; } }
.account-page .account-barski-notice { padding:12px 16px; border-left:3px solid var(--olive); background:var(--as); font-size:16px; line-height:1.5; }
.account-barski-empty { padding:24px 0; font-size:16px; line-height:1.6; }
.account-barski-empty p { margin:0 0 8px; }

/* Gift entry uses the approved wrapping palette and links to account-first preparation. */
[data-gift-entry].gift-entry{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:25px;background:#eee4d7;border:1px solid #ccbca5;padding:30px;border-radius:7px;margin:30px 0;color:#272a21;text-align:left;min-width:0}
[data-gift-entry] .gift-entry-kicker{font:700 10px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.12em;color:#4c5229;margin:0 0 10px}
[data-gift-entry] h2{font:400 30px/1.05 Impact,'Arial Black',Arial,sans-serif;letter-spacing:.01em;color:#5b1f33;margin:0 0 10px}
[data-gift-entry] p{font-size:14px;line-height:1.6;margin:0;max-width:52ch}
[data-gift-entry] .gift-entry-link{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;border:1px solid #4c5229;border-radius:5px;background:#4c5229;color:#fff8ee;font:700 13px/1.4 Arial,Helvetica,sans-serif;padding:14px 20px;text-decoration:none;white-space:nowrap}
[data-gift-entry] .gift-entry-parcel{width:57px;height:58px;background:#e9e9d8;position:relative;border-radius:2px;box-shadow:3px 5px #0001;margin-top:16px}
[data-gift-entry] .gift-entry-parcel:before{content:'';position:absolute;left:25px;width:8px;height:100%;background:#4c5229;top:0}
[data-gift-entry] .gift-entry-parcel:after{content:'∞';font:700 48px/1 Arial,sans-serif;color:#4c5229;position:absolute;left:9px;top:-29px}
[data-gift-entry] [data-gift-checkout-summary]:not([hidden]){font-size:12px;color:#4c5229;border-top:1px solid #ccbca5;padding-top:12px;margin-top:14px;overflow-wrap:anywhere}
[data-gift-entry] .gift-entry-link:focus-visible{outline:3px solid #2879c8;outline-offset:4px}
@media(max-width:760px){[data-gift-entry].gift-entry{grid-template-columns:45px minmax(0,1fr);padding:23px;gap:18px}[data-gift-entry] .gift-entry-parcel{transform:scale(.72);transform-origin:left center}[data-gift-entry] .gift-entry-link{grid-column:1/-1;width:100%;white-space:normal;text-align:center}[data-gift-entry] h2{font-size:29px}[data-gift-entry] p{font-size:13px}}