/* ===== WOOTZ — account area =====
   Layered on site.css: reuses its tokens (--surface, --line, --accent…) and its
   form primitives (.fld, .co-block, .btn-*), and adds only what the account
   pages need — the sidebar grid, the order rows and the small status chips.
   Logical properties throughout, so the RTL default and an LTR locale both work
   without a mirrored stylesheet.
   ================================================================== */

/* ── shell ─────────────────────────────────────────────────── */

.acc-lead{margin-block-start:10px;color:var(--text-2);font-size:15px;line-height:1.8}

.acc-grid{display:grid;grid-template-columns:264px 1fr;gap:26px;align-items:start}
.acc-main{display:grid;gap:14px;min-inline-size:0}

@media (max-width:900px){
  .acc-grid{grid-template-columns:1fr}
}

/* ── sidebar ───────────────────────────────────────────────── */

.acc-nav{position:sticky;inset-block-start:92px;display:grid;gap:14px}
@media (max-width:900px){.acc-nav{position:static}}

.acc-me{display:flex;gap:12px;align-items:center;padding:16px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.acc-me b{display:block;font-size:15px}
.acc-me small{display:block;font-size:12px;color:var(--text-3);word-break:break-all}
.acc-avatar{flex:0 0 auto;inline-size:42px;block-size:42px;border-radius:50%;
  display:grid;place-items:center;font-size:18px;font-weight:700;color:#fff;
  background:var(--premium-grad)}
.acc-warn{display:inline-block;margin-block-start:5px;font-size:12px;color:var(--rec)}

.acc-links{display:grid;gap:4px;padding:8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.acc-links a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  font-size:14px;color:var(--text-2);transition:background .18s,color .18s}
.acc-links a svg{inline-size:18px;block-size:18px;flex:0 0 auto}
.acc-links a:hover{background:var(--surface-2);color:var(--text)}
.acc-links a.is-active{background:var(--accent-soft);color:var(--accent)}
.acc-links .n{margin-inline-start:auto;font-style:normal;font-family:var(--ff-mono);font-size:11px;
  padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-3)}
.acc-links a.is-active .n{background:var(--accent);color:#fff}

.acc-out{margin-block-start:2px}
.btn-block{inline-size:100%;justify-content:center}

/* ── cards ─────────────────────────────────────────────────── */

.acc-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:18px 20px}
.acc-card h3{font-size:15px;margin-block-end:12px}
.acc-card .acc-sub{margin-block-start:26px}
.acc-card .acc-sub em{font-style:normal;font-size:11px;color:var(--text-3);font-family:var(--ff-mono)}
.acc-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:14px}
.acc-card-head h3{margin:0}
.acc-more{font-size:13px;color:var(--accent)}
.acc-count{font-size:12px;color:var(--text-3);font-family:var(--ff-mono)}
.acc-note{font-size:13px;line-height:1.8;color:var(--text-3);margin-block-end:14px}
.acc-two{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:700px){.acc-two{grid-template-columns:1fr}}

.acc-card .co-fields{margin-block-end:18px}
.acc-card .switch{margin-block-end:14px}

.acc-empty{padding:26px 0;text-align:center;color:var(--text-3);display:grid;gap:14px;justify-items:center}
.acc-empty p{font-size:14px}

.acc-flash{border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.8;margin-block-end:4px}
.acc-flash.is-ok{border:1px solid var(--premium-line);background:var(--premium-soft);color:var(--text)}
.acc-flash.is-bad{border:1px solid rgba(255,90,77,.4);background:rgba(255,90,77,.10);color:var(--text)}
.acc-flash ul{margin-block-start:6px;padding-inline-start:18px;list-style:disc}
.acc-flash li{font-size:13px;color:var(--text-2)}

.acc-danger{border-color:rgba(255,90,77,.28)}
.acc-danger-form{display:grid;gap:12px;max-inline-size:360px}
.btn.is-danger{color:var(--rec);border-color:rgba(255,90,77,.4)}
.btn.is-danger:hover{background:rgba(255,90,77,.12);border-color:var(--rec);color:var(--rec)}
.btn-sm{padding:8px 14px;font-size:13px}

/* ── shared compact primitives ─────────────────────────────── */

/* Quiet icon action — used wherever a row or card offers edit/delete/print.
   A full button per row turns a list into a wall of buttons. */
.acc-act{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;
  font-size:12px;color:var(--text-3);background:none;border:0;cursor:pointer;font-family:inherit;
  transition:background .18s,color .18s;text-decoration:none}
.acc-act svg{inline-size:14px;block-size:14px}
.acc-act:hover{background:var(--surface-2);color:var(--accent)}
.acc-act.is-danger:hover{color:var(--rec)}

/* Collapsible card. Secondary or destructive work (B2B invoicing details,
   disabling 2FA, closing the account) stays folded until it is asked for. */
.acc-panel{padding:0}
.acc-panel>*:not(summary){margin-inline:20px}
.acc-panel[open]>*:not(summary):last-child{margin-block-end:20px}
.acc-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;cursor:pointer;font-size:15px;font-weight:600;list-style:none}
.acc-summary::-webkit-details-marker{display:none}
.acc-summary small{display:block;font-size:12px;font-weight:400;color:var(--text-3);margin-block-start:3px}
.acc-summary .chev{flex:0 0 auto;inline-size:16px;block-size:16px;color:var(--text-3);transition:transform .2s}
.acc-panel[open] .acc-summary .chev{transform:rotate(180deg)}
.acc-panel[open] .acc-summary{border-block-end:1px solid var(--line);margin-block-end:18px}
.acc-panel.acc-danger .acc-summary{color:var(--rec)}

/* A row of label/value facts — order meta, session counts, verification state. */
.acc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.acc-facts .lbl{display:block;font-size:11px;color:var(--text-3);margin-block-end:4px}
.acc-facts b{font-size:14px}

/* ── overview ──────────────────────────────────────────────── */

.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:760px){.acc-stats{grid-template-columns:repeat(2,1fr)}}
.acc-stat{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px}
.acc-stat .lbl{display:block;font-size:12px;color:var(--text-3);margin-block-end:6px}
.acc-stat b{font-size:22px;font-family:var(--ff-mono)}
.acc-stat b em{font-style:normal;font-size:13px;color:var(--text-3)}

.acc-todo ul{display:grid;gap:8px}
.acc-todo li a{font-size:14px;color:var(--accent)}
.acc-todo li::before{content:"•";color:var(--text-3);margin-inline-end:8px}

/* ── orders ────────────────────────────────────────────────── */

.acc-tabs{display:flex;gap:8px;flex-wrap:wrap}
.acc-tabs a{position:relative;overflow:hidden;padding:8px 15px;border-radius:999px;font-size:13px;color:var(--text-2);
  border:1px solid var(--line);background:var(--surface);transition:border-color .18s,color .18s,background .18s}
.acc-tabs a:hover{border-color:var(--line-strong);color:var(--text)}
.acc-tabs a.is-active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

/* list — one card per order, thumbnails first */
.ord-list{display:grid;gap:10px}
.ord-card{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);
  overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.ord-card:hover{border-color:var(--line-strong);transform:translateY(-2px);box-shadow:0 18px 40px -30px rgba(0,0,0,.8)}
/* a hairline in the status colour, so a list scans by state */
.ord-card{border-inline-start:3px solid var(--line-strong)}
.ord-card.is-pending{border-inline-start-color:var(--text-3)}
.ord-card.is-confirmed,.ord-card.is-processing{border-inline-start-color:var(--accent)}
.ord-card.is-shipped{border-inline-start-color:var(--premium-bright)}
.ord-card.is-delivered,.ord-card.is-completed{border-inline-start-color:#3ECF8E}
.ord-card.is-cancelled,.ord-card.is-refunded{border-inline-start-color:var(--rec)}

.ord-open{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px}
.ord-open:hover .ord-id b{color:var(--accent)}

.ord-thumbs{display:flex;align-items:center}
.ord-thumbs img{inline-size:44px;block-size:44px;border-radius:10px;object-fit:cover;
  background:var(--surface-2);border:2px solid var(--surface)}
.ord-thumbs img+img{margin-inline-start:-14px}
.ord-more{inline-size:34px;block-size:44px;margin-inline-start:-10px;display:grid;place-items:center;
  font-family:var(--ff-mono);font-size:12px;color:var(--text-3)}

.ord-id{display:grid;gap:4px;min-inline-size:0}
.ord-id-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ord-id b{font-family:var(--ff-mono);font-size:14px;transition:color .18s}
.ord-id small{font-size:12px;color:var(--text-3)}

.ord-right{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.ord-chev{inline-size:16px;block-size:16px;color:var(--text-3);transition:transform .2s,color .2s}
[dir="ltr"] .ord-chev{transform:scaleX(-1)}
.ord-open:hover .ord-chev{color:var(--accent);transform:translateX(3px)}
[dir="ltr"] .ord-open:hover .ord-chev{transform:scaleX(-1) translateX(3px)}
.ord-total{font-family:var(--ff-mono);font-size:15px;white-space:nowrap}
.ord-total em{font-style:normal;font-size:12px;color:var(--text-3)}

.ord-foot{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:6px 12px;border-block-start:1px solid var(--line);background:var(--surface-2)}

@media (max-width:640px){
  .ord-open{grid-template-columns:auto 1fr;gap:12px}
  .ord-right{grid-column:1/-1;justify-content:space-between}
}

/* detail — header strip */
.ord-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ord-head-id{display:grid;gap:5px;justify-items:start}
.ord-head-id b{font-size:16px;letter-spacing:.5px}
.ord-head-id small{font-size:12px;color:var(--text-3)}
.ord-head-sum{text-align:center}
.ord-head-sum .lbl{display:block;font-size:11px;color:var(--text-3);margin-block-end:3px}
.ord-head-sum b{font-family:var(--ff-mono);font-size:20px}
.ord-head-sum em{font-style:normal;font-size:13px;color:var(--text-3)}
.ord-head-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.ord-closed{padding:12px 14px;border-radius:12px;font-size:14px;
  border:1px solid rgba(255,90,77,.35);background:rgba(255,90,77,.10);color:var(--text)}

/* detail — the tracking stepper */
.trk{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;
  margin-block:6px 20px;padding-block-start:6px;list-style:none}
/* rail + the filled part, painted from --trk-progress */
.trk::before,.trk::after{content:"";position:absolute;inset-block-start:15px;block-size:2px;border-radius:2px}
.trk::before{inset-inline:6%;background:var(--line-strong)}
.trk::after{inset-inline-start:6%;inline-size:calc((100% - 12%) * var(--trk-progress,0%) / 100%);
  background:var(--premium-grad);transition:inline-size .5s ease}
.trk-step{position:relative;display:grid;justify-items:center;gap:8px;text-align:center}
.trk-dot{position:relative;z-index:1;display:grid;place-items:center;inline-size:20px;block-size:20px;
  border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:#fff;
  transition:border-color .25s,background .25s,transform .25s}
.trk-dot svg{inline-size:11px;block-size:11px}
.trk-step.is-done .trk-dot{background:var(--accent);border-color:var(--accent)}
.trk-step.is-now .trk-dot{border-color:var(--accent);background:var(--surface);transform:scale(1.15);
  box-shadow:0 0 0 5px var(--accent-soft);animation:trk-beat 2s ease-in-out infinite}
@keyframes trk-beat{0%,100%{box-shadow:0 0 0 5px var(--accent-soft)}50%{box-shadow:0 0 0 9px transparent}}
.trk-txt{font-size:12px;color:var(--text-3);line-height:1.5}
.trk-step.is-done .trk-txt,.trk-step.is-now .trk-txt{color:var(--text)}
.trk-txt em{display:block;font-style:normal;font-family:var(--ff-mono);font-size:10px;
  color:var(--text-3);margin-block-start:3px}

@media (max-width:620px){
  .trk{grid-auto-flow:row;justify-items:start;gap:0}
  .trk::before{inset-block:10px;inset-inline-start:9px;inset-inline-end:auto;inline-size:2px;block-size:auto}
  .trk::after{inset-block-start:10px;inset-inline-start:9px;inline-size:2px;
    block-size:calc((100% - 20px) * var(--trk-progress,0%) / 100%)}
  .trk-step{grid-auto-flow:column;grid-template-columns:20px 1fr;justify-items:start;
    align-items:center;gap:12px;padding-block:8px;text-align:start}
}

.ord-facts{padding-block-start:14px;border-block-start:1px solid var(--line)}

/* detail — lines + totals */
.ord-lines{display:grid;gap:2px;margin-block-end:14px}
.ord-lines li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:10px;border-radius:12px;transition:background .18s}
.ord-lines li:hover{background:var(--surface-2)}
.ord-lines .pic{position:relative;flex:0 0 auto}
.ord-lines .pic img{inline-size:52px;block-size:52px;border-radius:10px;object-fit:cover;background:var(--surface-2)}
.ord-lines .pic .q{position:absolute;inset-block-start:-6px;inset-inline-end:-6px;min-inline-size:20px;
  padding:1px 5px;border-radius:999px;background:var(--accent);color:#fff;
  font-family:var(--ff-mono);font-size:11px;font-style:normal;text-align:center}
.ord-lines .nm{display:grid;gap:3px;min-inline-size:0}
.ord-lines .nm b{font-size:13.5px;line-height:1.5}
.ord-lines .nm small{font-size:11px;color:var(--text-3);font-family:var(--ff-mono)}
.ord-lines .v{font-family:var(--ff-mono);font-size:14px;white-space:nowrap}

.ord-totals{display:grid;gap:8px;margin-inline-start:auto;max-inline-size:340px;
  padding:14px;border-radius:12px;background:var(--surface-2)}
.ord-totals .row{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:13px;color:var(--text-2)}
.ord-totals .row em{font-style:normal;font-family:var(--ff-mono);font-size:11px;color:var(--text-3)}
.ord-totals .is-off{color:#3ECF8E}
.ord-totals .is-grand{padding-block-start:10px;border-block-start:1px solid var(--line-strong);
  font-size:15px;color:var(--text)}
.ord-totals .is-grand b{font-family:var(--ff-mono);font-size:19px}

/* detail — addresses */
.ord-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.ord-address{display:grid;gap:4px;font-style:normal;font-size:13px;line-height:1.7;color:var(--text-2)}
.ord-address b{font-size:14px;color:var(--text)}
.ord-address .note{margin-block-start:6px;font-size:12px;color:var(--text-3)}

.ord-status{font-size:12px;padding:5px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line-strong);color:var(--text-2);background:var(--surface-2)}
.ord-status.is-confirmed,.ord-status.is-processing{color:var(--accent);border-color:var(--premium-line);background:var(--accent-soft)}
.ord-status.is-shipped{color:var(--premium-bright);border-color:var(--premium-line);background:var(--premium-soft)}
.ord-status.is-delivered,.ord-status.is-completed{color:#3ECF8E;border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.12)}
.ord-status.is-cancelled,.ord-status.is-refunded{color:var(--rec);border-color:rgba(255,90,77,.35);background:rgba(255,90,77,.10)}

.acc-pages{display:flex;justify-content:center}

/* ── addresses ─────────────────────────────────────────────── */

.adr-hint{font-size:13px;color:var(--text-3);margin-block-end:14px}

/* Cards, not stacked rows: a book of six addresses fits on one screen. */
.adr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}

.adr-card{display:grid;gap:10px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface-2);
  transition:border-color .18s,background .18s}
.adr-card:hover{border-color:var(--line-strong)}
.adr-card.is-default{border-color:var(--accent);background:var(--accent-soft)}

/* the default picker — a radio, because it is one choice among the saved set */
.adr-pick{display:flex;align-items:center;justify-content:space-between;gap:10px}
.adr-radio{display:flex;align-items:center;gap:9px;cursor:pointer;min-inline-size:0}
.adr-radio input{position:absolute;opacity:0;inline-size:0;block-size:0}
.adr-radio .dot{flex:0 0 auto;inline-size:16px;block-size:16px;border-radius:50%;
  border:1.5px solid var(--line-strong);position:relative;transition:border-color .18s}
.adr-radio input:checked~.dot{border-color:var(--accent)}
.adr-radio input:checked~.dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent)}
.adr-radio input:focus-visible~.dot{box-shadow:0 0 0 3px var(--accent-soft)}
.adr-title{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adr-badge{font-style:normal;font-size:10px;margin-inline-start:7px;padding:2px 7px;border-radius:999px;
  background:var(--accent);color:#fff;vertical-align:1px}

.adr-body{display:grid;gap:3px;font-size:13px;color:var(--text-2);line-height:1.6}
.adr-line{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.adr-place{color:var(--text-3);font-size:12px}
.adr-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-start:2px}
.adr-meta b{font-size:12px;font-weight:500;color:var(--text-2)}
.adr-meta em{font-style:normal;font-size:11px;color:var(--text-3);
  padding:1px 6px;border-radius:6px;background:var(--surface);border:1px solid var(--line)}

.adr-actions{display:flex;align-items:center;gap:6px;padding-block-start:8px;
  border-block-start:1px solid var(--line)}


.adr-form{margin-block-start:0}
.adr-submit{display:flex;gap:10px;align-items:center}
.adr-opt{margin-block-end:10px}

/* ── preferences ───────────────────────────────────────────── */

.pref-table{inline-size:100%;border-collapse:collapse;margin-block-end:18px}
.pref-table th,.pref-table td{padding:10px 8px;text-align:start;border-block-end:1px solid var(--line);font-size:14px}
.pref-table th{font-size:12px;color:var(--text-3);font-weight:500}
.pref-table td:not(:first-child),.pref-table th:not(:first-child){inline-size:150px}
.acc-consent{margin-block:6px 14px}

/* ── security ──────────────────────────────────────────────── */

.tfa-setup{display:grid;gap:14px}
.tfa-secret{font-size:14px;color:var(--text-2)}
.tfa-secret b{font-family:var(--ff-mono);letter-spacing:1px}
.tfa-codes summary{cursor:pointer;font-size:14px;color:var(--accent)}
.tfa-codes ul{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-block-start:12px}
.tfa-codes li{font-family:var(--ff-mono);font-size:13px;padding:8px 10px;border-radius:8px;background:var(--surface-2)}
.tfa-confirm{display:grid;gap:12px;max-inline-size:320px}

/* ── wishlist ──────────────────────────────────────────────── */

.wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.wish-card{display:grid;gap:10px;padding:12px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface-2);transition:border-color .18s,transform .18s}
.wish-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.wish-card.is-out{opacity:.72}
.wish-pic{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--surface)}
.wish-pic img{inline-size:100%;block-size:100%;object-fit:cover}
.wish-out{position:absolute;inset-block-end:6px;inset-inline-start:6px;font-size:10px;
  padding:3px 8px;border-radius:999px;background:rgba(255,90,77,.9);color:#fff}
.wish-body{display:grid;gap:3px}
.wish-name{font-size:13px;font-weight:600;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wish-name:hover{color:var(--accent)}
.wish-body small{font-size:11px;color:var(--text-3)}
.wish-price{font-family:var(--ff-mono);font-size:14px;color:var(--accent)}
.wish-actions{display:grid;gap:6px;justify-items:center;padding-block-start:8px;
  border-block-start:1px solid var(--line)}


/* ── card variants used across the account pages ───────────── */

/* One statement, one control — 2FA enable, revoke sessions. */
.acc-inline{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.acc-inline h3{margin-block-end:6px}
.acc-inline .acc-note{margin-block-end:0;max-inline-size:52ch}

/* The save row of a multi-card form: the button belongs to the whole form, not
   to the last card in it. */
.acc-bar{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.acc-bar .acc-note,.acc-bar .form-error{margin:0;flex:1 1 220px}
.acc-card .acc-bar{margin-block-start:4px}

.acc-facts b.is-on{color:#3ECF8E}
.acc-facts b.is-off{color:var(--rec)}

/* ── auth pages ────────────────────────────────────────────── */

.auth-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.auth-grid-single{grid-template-columns:minmax(0,460px);justify-content:center}
@media (max-width:820px){.auth-grid{grid-template-columns:1fr}}

.auth-card{display:grid;gap:16px}
.auth-form{display:grid;gap:14px}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.auth-link{font-size:13px;color:var(--accent)}
.auth-alt{font-size:14px;color:var(--text-2);text-align:center}
.auth-alt a{color:var(--accent)}
.auth-note{font-size:14px;line-height:1.8;color:var(--text-2)}
.auth-aside{align-self:start}
.auth-perks{display:grid;gap:10px;margin-block-end:16px}
.auth-perks li{position:relative;padding-inline-start:22px;font-size:14px;line-height:1.8;color:var(--text-2)}
.auth-perks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent)}
.auth-guest{font-size:13px;color:var(--text-3);line-height:1.9}
.auth-guest a{color:var(--accent)}

/* ── checkout additions ────────────────────────────────────── */
/* Moved to site.css, beside .co-block: checkout.blade.php loads only site.css,
   so anything parked here never reached the checkout page at all. */

@media print{
  .acc-nav,.acc-tabs,.ord-actions,#hdr,.back-top{display:none !important}
  .acc-grid{grid-template-columns:1fr}
}

/* ══ motion ═══════════════════════════════════════════════════
   Every animation here is decoration over a layout that already
   works: the page is readable at frame zero, and the whole block is
   switched off for anyone who asked for less motion (bottom of file).
   ═══════════════════════════════════════════════════════════ */

/* Section entrance — each card in the column arrives a beat after the one
   above it, so the eye is led down the page instead of hit with all of it. */
@keyframes acc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.acc-main>*{animation:acc-rise .45s cubic-bezier(.22,.9,.3,1) both}
.acc-main>*:nth-child(1){animation-delay:.02s}
.acc-main>*:nth-child(2){animation-delay:.07s}
.acc-main>*:nth-child(3){animation-delay:.12s}
.acc-main>*:nth-child(4){animation-delay:.17s}
.acc-main>*:nth-child(5){animation-delay:.22s}
.acc-main>*:nth-child(n+6){animation-delay:.26s}

/* the sidebar slides in from the page edge */
@keyframes acc-slide-in{from{opacity:0;transform:translateX(calc(var(--acc-from,1) * 18px))}to{opacity:1;transform:none}}
.acc-nav{animation:acc-slide-in .5s cubic-bezier(.22,.9,.3,1) both}
[dir="ltr"] .acc-nav{--acc-from:-1}
.acc-avatar,.acc-menu-avatar{animation:acc-pop .5s cubic-bezier(.34,1.56,.64,1) both .12s}
@keyframes acc-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* items inside a grid/list stagger on their own, driven by --i from the view */
.acc-stagger>*{animation:acc-rise .4s cubic-bezier(.22,.9,.3,1) both;
  animation-delay:calc(.05s * var(--i,0) + .1s)}

/* Sidebar links: the active one grows a rail, hover nudges inward. */
.acc-links a{position:relative;overflow:hidden}
.acc-links a::before{content:"";position:absolute;inset-block:6px;inset-inline-start:0;inline-size:2px;
  border-radius:2px;background:var(--accent);transform:scaleY(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.acc-links a.is-active::before{transform:scaleY(1)}
.acc-links a:hover{transform:translateX(calc(var(--acc-from,1) * -3px))}
.acc-links a{transition:background .18s,color .18s,transform .18s}
.acc-links a svg{transition:transform .25s cubic-bezier(.34,1.4,.64,1)}
.acc-links a:hover svg,.acc-links a.is-active svg{transform:scale(1.12)}
.acc-links .n{transition:background .18s,color .18s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.acc-links a:hover .n{transform:scale(1.1)}

/* Collapsible cards: the CONTENT is animated, not the height.
   ::details-content height interpolation was tried first and clipped the panel
   to zero in this Chrome, so the panel is left to size itself normally and its
   children slide in — an effect no browser can get wrong. */
.acc-panel[open]>*:not(summary){animation:acc-reveal .32s cubic-bezier(.22,.9,.3,1) both}
@keyframes acc-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc-summary{transition:background .18s,color .18s}
.acc-summary:hover{background:var(--surface-2)}

/* Cards that lead somewhere lift; cards that just hold text do not. */
.acc-stat{transition:transform .2s cubic-bezier(.34,1.4,.64,1),border-color .2s,background .2s}
.acc-stat:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.acc-stat b{display:block;transition:color .2s}
.acc-stat:hover b{color:var(--accent)}

/* Flash + validation feedback */
@keyframes acc-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.acc-flash{animation:acc-drop .35s cubic-bezier(.22,.9,.3,1) both}
@keyframes acc-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.fld.has-error input,.fld.has-error textarea,.fld.has-error select{animation:acc-shake .4s cubic-bezier(.36,.07,.19,.97)}
.fld .err{animation:acc-drop .25s ease both}
@keyframes acc-tick{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.fld.is-valid>span::after{display:inline-block;animation:acc-tick .3s cubic-bezier(.34,1.56,.64,1) both}
.fld input,.fld textarea,.fld select{transition:border-color .18s,background .18s,box-shadow .18s}

/* Signed-out account pages (login, register, reset) share the entrance. */
.auth-card{animation:acc-rise .45s cubic-bezier(.22,.9,.3,1) both .04s}
.auth-aside{animation:acc-rise .45s cubic-bezier(.22,.9,.3,1) both .12s}
.auth-perks li{animation:acc-rise .4s cubic-bezier(.22,.9,.3,1) both}
.auth-perks li:nth-child(2){animation-delay:.06s}
.auth-perks li:nth-child(3){animation-delay:.12s}
.auth-perks li:nth-child(4){animation-delay:.18s}
.auth-perks li::before{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.auth-perks li:hover::before{transform:scale(1.5)}

/* Empty states settle in rather than appear */
.acc-empty{animation:acc-rise .5s cubic-bezier(.22,.9,.3,1) both .1s}

/* Off for anyone who asked for less motion — states remain, movement stops. */
@media (prefers-reduced-motion:reduce){
  .acc-main>*,.acc-nav,.acc-stagger>*,.acc-avatar,.acc-menu-avatar,.acc-flash,.acc-empty,
  .auth-card,.auth-aside,.auth-perks li,
  .fld.has-error input,.fld.has-error textarea,.fld.has-error select,.fld .err,
  .fld.is-valid>span::after{animation:none}
  .acc-links a:hover,.acc-stat:hover,.ord-card:hover,.wish-card:hover{transform:none}
  .acc-panel[open]>*:not(summary){animation:none}
}