/*
 * Mitt konto. Uses the shop's commerce tokens when the child theme defines them (--tsco-*),
 * with neutral fallbacks so the module also works under another child theme.
 */ .aeon-acct { --acct-brand: var(--tsco-brand, #4b002d); --acct-primary: var(--tsco-primary, #1769e0); --acct-primary-hover: var(--tsco-primary-hover, #0e57c0); --acct-ink: var(--tsco-ink, #25252a); --acct-muted: var(--tsco-muted, #6b6e76); --acct-line: var(--tsco-line, #dfe2e7); --acct-line-soft: var(--tsco-line-soft, #eceef1); --acct-surface: var(--tsco-surface, #fff); --acct-soft: var(--tsco-surface-soft, #f7f7f8); --acct-focus: var(--tsco-focus, 0 0 0 3px rgba(23, 105, 224, .22)); --acct-radius: var(--tsco-radius, 14px); --acct-field-radius: var(--tsco-field-radius, 9px); --acct-shadow: var(--tsco-shadow, 0 12px 34px rgba(29, 20, 26, .07)); --acct-good: #0f7a3d; --acct-good-bg: #e6f5ec; --acct-warn: #8a5a00; --acct-warn-bg: #fdf3dc; --acct-bad: #b42318; --acct-bad-bg: #fdecea; --acct-info: #1e4fa0; --acct-info-bg: #e8f0fc; color: var(--acct-ink); font-size: 1rem; line-height: 1.55; margin: 0 auto 4rem; max-width: 1080px; } .aeon-acct *, .aeon-acct *::before, .aeon-acct *::after { box-sizing: border-box; } .aeon-acct h2, .aeon-acct h3 { color: var(--acct-ink); margin: 0 0 .75rem; line-height: 1.25; } .aeon-acct h2 { font-size: 1.45rem; } .aeon-acct h3 { font-size: 1.12rem; } .aeon-acct p { margin: 0 0 1rem; } .aeon-acct a { color: var(--acct-primary); } .aeon-acct address { font-style: normal; line-height: 1.6; } .aeon-acct__icon { flex: none; } .aeon-acct__muted { color: var(--acct-muted); font-size: .92rem; margin: 0; } .aeon-acct__fine { color: var(--acct-muted); font-size: .85rem; margin: 1rem 0 0; } .aeon-acct__lead { color: var(--acct-muted); } .aeon-acct__intro { color: var(--acct-muted); margin-bottom: 1.25rem; } /* Cards */ .aeon-acct__card { background: var(--acct-surface); border: 1px solid var(--acct-line); border-radius: var(--acct-radius); box-shadow: var(--acct-shadow); padding: clamp(1.15rem, 3vw, 1.75rem); margin-bottom: 1.25rem; } .aeon-acct__card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .aeon-acct__card-head h3 { margin: 0; } .aeon-acct__card-head > a { font-size: .92rem; white-space: nowrap; } .aeon-acct__card--narrow { max-width: 560px; } .aeon-acct__card--center { text-align: center; } .aeon-acct__card--center > .aeon-acct__icon { width: 44px; height: 44px; color: var(--acct-primary); margin-bottom: .5rem; } .aeon-acct__card--danger { border-color: #f1c4c0; } .aeon-acct__card--danger h3 { color: var(--acct-bad); } .aeon-acct__grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 1.25rem; } /* Login and registration */ .aeon-acct--auth { max-width: 960px; } .aeon-acct--narrow { max-width: 480px; } .aeon-acct__auth { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; } .aeon-acct__card--auth { margin: 0; } .aeon-acct__aside { padding-top: .5rem; } .aeon-acct__aside h2 { font-size: 1.15rem; } .aeon-acct__benefits { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; } .aeon-acct__benefits li { display: flex; gap: .75rem; align-items: center; } .aeon-acct__benefits .aeon-acct__icon { width: 38px; height: 38px; padding: 9px; border-radius: 50%; background: var(--acct-soft); color: var(--acct-brand); } .aeon-acct__switch { margin: 1.25rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--acct-line-soft); text-align: center; color: var(--acct-muted); } @media (max-width: 820px) { .aeon-acct__auth { grid-template-columns: 1fr; } .aeon-acct__aside { order: 2; } } /* Tabs */ .aeon-acct__tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-bottom: 1.4rem; background: var(--acct-soft); border-radius: 999px; } .aeon-acct__tabs button { appearance: none; border: 0; background: transparent; color: var(--acct-muted); font: inherit; font-weight: 600; font-size: .95rem; padding: .55rem .75rem; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; } .aeon-acct__tabs button[aria-selected="true"] { background: var(--acct-surface); color: var(--acct-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .aeon-acct__tabs button:focus-visible { outline: none; box-shadow: var(--acct-focus); } /* Forms */ .aeon-acct__form { display: grid; gap: 1rem; } .aeon-acct__form[hidden] { display: none; } .aeon-acct__form + .aeon-acct__form { margin-top: 1rem; } .aeon-acct__form--alt { margin-top: .25rem !important; } .aeon-acct__row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } .aeon-acct__row > .aeon-acct__field { flex: 1 1 180px; } .aeon-acct__row--between { justify-content: space-between; font-size: .92rem; } .aeon-acct__field { display: grid; gap: .35rem; } .aeon-acct__field label { font-weight: 600; font-size: .92rem; } .aeon-acct__optional { color: var(--acct-muted); font-weight: 400; } .aeon-acct .aeon-acct__field input, .aeon-acct .aeon-acct__field select { font-family: var(--ts-font-roboto, inherit); font-weight: 400; line-height: 1.4; box-shadow: none; width: 100%; min-height: 48px; padding: .65rem .85rem; font: inherit; color: var(--acct-ink); background: var(--acct-surface); border: 1px solid var(--acct-line); border-radius: var(--acct-field-radius); transition: border-color .15s, box-shadow .15s; } .aeon-acct .aeon-acct__field input:focus, .aeon-acct .aeon-acct__field select:focus { outline: none; border-color: var(--acct-primary); box-shadow: var(--acct-focus); } .aeon-acct__hint { color: var(--acct-muted); font-size: .85rem; margin: 0; } .aeon-acct__password { position: relative; } .aeon-acct .aeon-acct__password input { padding-right: 3rem; } .aeon-acct__reveal { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--acct-muted); cursor: pointer; } .aeon-acct__reveal:hover, .aeon-acct__reveal.is-on { color: var(--acct-ink); background: var(--acct-soft); } .aeon-acct .aeon-acct__code { font-size: 1.5rem !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; } .aeon-acct__check { display: inline-flex; gap: .5rem; align-items: center; cursor: pointer; } .aeon-acct__check input { width: 1.15rem; height: 1.15rem; accent-color: var(--acct-primary); margin: 0; } /* Buttons */ .aeon-acct__button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.4rem; font: inherit; font-weight: 600; color: #fff !important; text-decoration: none !important; background: var(--acct-primary); border: 1px solid var(--acct-primary); border-radius: var(--acct-field-radius); cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; } .aeon-acct__form > .aeon-acct__button { width: 100%; } .aeon-acct__card:not(.aeon-acct__card--auth) .aeon-acct__form > .aeon-acct__button { width: auto; justify-self: start; } .aeon-acct__button:hover { background: var(--acct-primary-hover); border-color: var(--acct-primary-hover); } .aeon-acct__button:focus-visible { outline: none; box-shadow: var(--acct-focus); } .aeon-acct__button[disabled] { opacity: .65; cursor: progress; } .aeon-acct__button--quiet { background: var(--acct-surface); color: var(--acct-ink) !important; border-color: var(--acct-line); } .aeon-acct__button--quiet:hover { background: var(--acct-soft); border-color: var(--acct-line); } .aeon-acct__button--danger { background: var(--acct-bad); border-color: var(--acct-bad); } .aeon-acct__button--danger:hover { background: #8f1c13; border-color: #8f1c13; } .aeon-acct__link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-size: .92rem; color: var(--acct-primary); text-decoration: underline; cursor: pointer; justify-self: start; } .aeon-acct__chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; font-size: .9rem; font-weight: 600; color: var(--acct-ink) !important; text-decoration: none !important; background: var(--acct-soft); border-radius: 999px; } .aeon-acct__chip:hover { background: var(--acct-line-soft); } .aeon-acct__chip .aeon-acct__icon { width: 18px; height: 18px; } /* Messages */ .aeon-acct__notice { margin: 0; padding: .75rem 1rem; border-radius: var(--acct-field-radius); font-size: .93rem; } .aeon-acct__notice.is-error { color: var(--acct-bad); background: var(--acct-bad-bg); } .aeon-acct__notice.is-ok { color: var(--acct-good); background: var(--acct-good-bg); margin-bottom: 1.25rem; } .aeon-acct__form .aeon-acct__notice.is-ok { margin-bottom: 0; } .aeon-acct__done { text-align: center; padding: .5rem 0; } .aeon-acct__done > .aeon-acct__icon { width: 44px; height: 44px; color: var(--acct-primary); margin-bottom: .5rem; } .aeon-acct__done:focus { outline: none; } .aeon-acct__empty { color: var(--acct-muted); } .aeon-acct__empty p { margin-bottom: .75rem; } /* Signed-in layout */ .aeon-acct__layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; } .aeon-acct__nav { position: sticky; top: 96px; } .aeon-acct__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; } .aeon-acct__nav a, .aeon-acct__nav button { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .85rem; font: inherit; font-weight: 500; color: var(--acct-ink); text-decoration: none; text-align: left; background: transparent; border: 0; border-radius: 10px; cursor: pointer; transition: background .15s, color .15s; } .aeon-acct__nav a:hover, .aeon-acct__nav button:hover { background: var(--acct-soft); } .aeon-acct__nav a[aria-current="page"] { background: var(--acct-surface); color: var(--acct-brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--acct-brand), 0 1px 3px rgba(0, 0, 0, .06); } .aeon-acct__nav a:focus-visible, .aeon-acct__nav button:focus-visible { outline: none; box-shadow: var(--acct-focus); } .aeon-acct__nav .aeon-acct__icon { color: var(--acct-muted); } .aeon-acct__nav a[aria-current="page"] .aeon-acct__icon { color: var(--acct-brand); } .aeon-acct__nav-out { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--acct-line-soft); } .aeon-acct__nav-out button { color: var(--acct-muted); } .aeon-acct__hello { margin-bottom: 1.25rem; } .aeon-acct__hello h2 { margin-bottom: .15rem; } .aeon-acct__hello p { color: var(--acct-muted); margin: 0; } @media (max-width: 860px) { .aeon-acct__layout { grid-template-columns: 1fr; } .aeon-acct__nav { position: static; margin: 0 -1rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--acct-line); } .aeon-acct__nav::-webkit-scrollbar { display: none; } .aeon-acct__nav ul { display: flex; gap: .25rem; padding: 0 1rem; width: max-content; } .aeon-acct__nav a, .aeon-acct__nav button { white-space: nowrap; border-radius: 10px 10px 0 0; padding: .7rem .8rem; } .aeon-acct__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--acct-brand); background: transparent; } .aeon-acct__nav-out { margin: 0; padding: 0; border: 0; } } /* Orders */ .aeon-acct__orders { display: grid; gap: .75rem; } .aeon-acct__order { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--acct-line-soft); border-radius: 12px; transition: border-color .15s, background .15s; } .aeon-acct__order:hover { border-color: var(--acct-line); background: var(--acct-soft); } .aeon-acct__order-main { flex: 1; display: grid; gap: .2rem; min-width: 0; color: inherit !important; text-decoration: none !important; } .aeon-acct__order-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .aeon-acct__order-items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aeon-acct__order-meta { color: var(--acct-muted); font-size: .9rem; } @media (max-width: 560px) { .aeon-acct__order { flex-direction: column; align-items: stretch; } .aeon-acct__order-items { white-space: normal; } .aeon-acct__order .aeon-acct__chip { align-self: flex-start; } } .aeon-acct__badge { display: inline-block; padding: .15rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; } .aeon-acct__badge.is-good { color: var(--acct-good); background: var(--acct-good-bg); } .aeon-acct__badge.is-warn { color: var(--acct-warn); background: var(--acct-warn-bg); } .aeon-acct__badge.is-bad { color: var(--acct-bad); background: var(--acct-bad-bg); } .aeon-acct__badge.is-info { color: var(--acct-info); background: var(--acct-info-bg); } .aeon-acct__badge.is-muted { color: var(--acct-muted); background: var(--acct-soft); } .aeon-acct__back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; font-weight: 600; text-decoration: none !important; } /* Order progress */ .aeon-acct__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin: .5rem 0 1.5rem; padding: 0; counter-reset: step; } .aeon-acct__steps li { position: relative; display: grid; justify-items: center; gap: .45rem; text-align: center; font-size: .88rem; color: var(--acct-muted); } .aeon-acct__steps li::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 14px); right: calc(50% + 14px); height: 2px; background: var(--acct-line); } .aeon-acct__steps li:first-child::before { display: none; } .aeon-acct__steps li.is-done { color: var(--acct-ink); font-weight: 600; } .aeon-acct__steps li.is-done::before { background: var(--acct-good); } .aeon-acct__dot { position: relative; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--acct-surface); border: 2px solid var(--acct-line); } .aeon-acct__steps li.is-done .aeon-acct__dot { background: var(--acct-good); border-color: var(--acct-good); color: #fff; } .aeon-acct__dot .aeon-acct__icon { width: 15px; height: 15px; stroke-width: 2.6; } .aeon-acct__actions { display: flex; flex-wrap: wrap; gap: .6rem; } .aeon-acct__actions .aeon-acct__button { min-height: 44px; padding: .55rem 1rem; } .aeon-acct__actions .aeon-acct__icon { width: 18px; height: 18px; } /* Order lines */ .aeon-acct__lines { width: 100%; border-collapse: collapse; margin: 0; border: 0; } .aeon-acct__lines td, .aeon-acct__lines th { padding: .7rem .5rem; border: 0; border-bottom: 1px solid var(--acct-line-soft); text-align: left; vertical-align: middle; background: none; font-weight: 400; } .aeon-acct__lines tfoot th { color: var(--acct-muted); text-align: right; } .aeon-acct__lines tfoot th, .aeon-acct__lines tfoot td { border-bottom: 0; padding-top: .35rem; padding-bottom: .35rem; } .aeon-acct__lines tfoot tr:first-child th, .aeon-acct__lines tfoot tr:first-child td { padding-top: 1rem; } .aeon-acct__lines .is-total th, .aeon-acct__lines .is-total td { border-top: 1px solid var(--acct-line); padding-top: .8rem; } .aeon-acct__lines tfoot tr:last-child th, .aeon-acct__lines tfoot tr:last-child td { border-bottom: 0; } .aeon-acct__lines .is-total th, .aeon-acct__lines .is-total td { color: var(--acct-ink); font-weight: 700; font-size: 1.05rem; } .aeon-acct__num { text-align: right !important; white-space: nowrap; } .aeon-acct__num small, .aeon-acct__num .includes_tax { display: block; font-size: .8rem; font-weight: 400; color: var(--acct-muted); white-space: normal; } @media (max-width: 560px) { .aeon-acct__thumb { width: 48px; padding-right: 0 !important; } .aeon-acct__thumb img { width: 40px; height: 40px; } .aeon-acct__lines td, .aeon-acct__lines th { padding-left: .35rem; padding-right: .35rem; } } .aeon-acct__thumb { width: 72px; } .aeon-acct__thumb img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; background: var(--acct-soft); display: block; } /* Tiles */ .aeon-acct__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 560px) { .aeon-acct__tiles { grid-template-columns: 1fr; } } .aeon-acct__tile { display: grid; gap: .3rem; padding: 1.15rem 1.2rem; color: var(--acct-ink) !important; text-decoration: none !important; background: var(--acct-surface); border: 1px solid var(--acct-line); border-radius: var(--acct-radius); transition: border-color .15s, transform .15s, box-shadow .15s; } .aeon-acct__tile:hover { border-color: var(--acct-primary); box-shadow: var(--acct-shadow); transform: translateY(-1px); } .aeon-acct__tile .aeon-acct__icon { width: 26px; height: 26px; color: var(--acct-brand); margin-bottom: .25rem; } .aeon-acct__tile span { color: var(--acct-muted); font-size: .9rem; } .aeon-acct__current { display: flex; align-items: center; gap: .55rem; font-weight: 600; word-break: break-all; } .aeon-acct__current .aeon-acct__icon { color: var(--acct-muted); } /* Confirm-it-is-you dialog */ .aeon-acct__dialog { width: min(440px, calc(100vw - 2rem)); padding: 1.6rem; border: 0; border-radius: var(--acct-radius); box-shadow: 0 30px 80px rgba(0, 0, 0, .25); color: var(--acct-ink); } .aeon-acct__dialog::backdrop { background: rgba(20, 10, 18, .45); } .aeon-acct__dialog p { color: var(--acct-muted); } @media (prefers-reduced-motion: reduce) { .aeon-acct * { transition: none !important; } }