/* ═══════════════════════════════════════════════════════════════════════════
   store-account-v4.css — My Account v4 (Interaction Demo v4, 2026-10-14)
   Layered on top of css/store-account.css (loaded right after it, account
   page only). Same structure and data as before; new look + motion:
     · condensed uppercase titles, "My Account" rises in line by line
     · bordered cards (radius 26), PAC face avatar when there is no photo
     · nav with icons + a sliding indicator; sign out sits under the nav
     · status filter chips (All / In review / Paid / Shipped)
     · order cards stagger in once, lift on hover, pill buttons
     · tab switch = fade out → content height glides → new tab staggers in
     · order details opens with a scale-in + staggered columns, the status
       timeline fills step by step
   Entrance waits for html.pmx-entered (js/pacco-motion.js) so it plays as
   the page transition lifts; a 3.5s CSS safety shows everything regardless.
   Behaviour: js/pacco-account-v4.js.
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"PcoBricolage";src:url("../assets/fonts/pco-bricolage.woff2") format("woff2");font-weight:400 800;font-stretch:75% 100%;font-display:swap}

.acct-main{--ac4-out:cubic-bezier(.16,1,.3,1);--ac4-pop:cubic-bezier(.34,1.45,.55,1);--ac4-ink:#0c0b0f;--ac4-line:#ececf0;--ac4-soft:#f7f7f9;--ac4-muted:rgba(12,11,15,.55);background:#fff}
.acct-main .acct-container{max-width:1120px;padding-top:clamp(30px,5vw,64px);padding-bottom:clamp(56px,8vw,110px)}

/* Verify-your-email banner (unverified account, store checkout policy) */
.acct-main .acct-verify-banner{display:flex;align-items:center;gap:16px;margin:0 0 clamp(18px,2.5vw,26px);padding:16px 18px;border:1.5px solid #ecdfae;border-radius:22px;background:#fffdf3}
.acct-main .acct-verify-banner[hidden]{display:none}
.acct-main .avb-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff7d9;border:1.5px solid #ecdfae;color:#8a6200;flex:none}
.acct-main .avb-ic svg{width:21px;height:21px}
.acct-main .avb-copy{min-width:0;flex:1}
.acct-main .avb-copy b{display:block;font-size:15px;font-weight:800}
.acct-main .avb-copy p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:rgba(12,11,15,.6)}
.acct-main .avb-copy p b{font-weight:800;color:var(--ac4-ink);overflow-wrap:anywhere}
.acct-main .avb-copy p.avb-msg{color:#b4540a}
.acct-main .avb-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.acct-main .avb-head>b{font-size:15px;font-weight:800;line-height:1.2}
.acct-main .avb-hint{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--ac4-muted)}
.acct-main .avb-link{border:0;background:none;padding:6px 2px;font:inherit;font-size:13.5px;font-weight:800;color:var(--ac4-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.acct-main .avb-link:hover{opacity:.7}
.acct-main .avb-link[disabled]{opacity:.5;cursor:default;text-decoration:none}
.acct-main .avb-acts{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.acct-main .avb-btn{height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ac4-ink);background:var(--ac4-ink);color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ac4-pop),box-shadow .25s}
.acct-main .avb-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px -12px rgba(12,11,15,.6)}
.acct-main .avb-btn.is-ghost{background:#fff;color:var(--ac4-ink)}
.acct-main .avb-btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
@media(max-width:720px){
  .acct-main .acct-verify-banner{flex-wrap:wrap;gap:12px;padding:14px}
  .acct-main .avb-acts{width:100%}
  .acct-main .avb-btn{flex:1 1 auto;height:46px}
}

/* ───────── Titles ───────── */
.acct-main .acct-header{margin-bottom:clamp(20px,3vw,34px)}
.acct-main .acct-header h1{font-family:"PcoBricolage",Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(44px,6vw,84px);font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}
.ac4-ln{display:block;overflow:hidden;padding:.1em 0 .14em;margin:-.1em 0 -.14em}
.ac4-ln>span{display:block}
.acct-main .acct-tab-title,.acct-main .acct-section-title,.acct-main .acct-addresses h2,.acct-main .acct-logged-out h2,#orderDetailsModal .acct-details-head h2,#addressModal .acct-addr-modal-title{font-family:"PcoBricolage",Inter,ui-sans-serif,system-ui,sans-serif;font-weight:800;font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em;line-height:1}
.acct-main .acct-tab-title,.acct-main .acct-section-title,.acct-main .acct-addresses h2{margin:0 0 8px;font-size:clamp(26px,2.8vw,34px)}
.acct-main .acct-addresses{align-items:flex-start;gap:16px;margin-bottom:0}
.acct-main .acct-addresses h2{margin:0}
.acct-main .acct-tab-subtitle,.acct-main .acct-section-subtitle{margin:8px 0 22px;max-width:520px;font-size:14.5px;line-height:1.5;color:rgba(12,11,15,.58)}
.acct-main .acct-tab-title+.acct-tab-subtitle,.acct-main .acct-section-title+.acct-section-subtitle{margin-top:0}

/* ───────── Grid + sidebar ───────── */
.acct-main .acct-grid{grid-template-columns:minmax(230px,290px) minmax(0,1fr);gap:28px;align-items:start}
.acct-main .acct-sidebar{position:sticky;top:96px;gap:14px}
.acct-main .acct-profile-card{border:1.5px solid var(--ac4-line);border-radius:26px;padding:24px 18px 22px;background:#fff}
.acct-main .acct-profile-avatar{width:84px;height:84px;margin:0 auto 12px;border:0;background:#f5f5f7;overflow:visible}
.acct-main .acct-profile-avatar img{position:relative;z-index:1;border-radius:999px}
.acct-main .acct-profile-avatar.ac4-has-face .acct-profile-initials{display:none !important}
.acct-main .acct-profile-avatar.ac4-photo .ac4-me-char,.acct-main .acct-profile-avatar:has(#profileImagePreview[style*="block"]) .ac4-me-char{display:none}
.acct-main .ac4-me-char{position:absolute;left:50%;top:50%;width:52px;height:52px;translate:-50% -50%;display:grid;place-items:center;pointer-events:none;transition:scale .5s var(--ac4-pop)}
.acct-main .ac4-me-char>.ac4-char-bounce{width:100%;height:100%;display:grid;place-items:center}
/* The mascot must fill a square box. Without a square box the SVG takes its
   intrinsic viewBox ratio (e.g. 374x441 → 61px tall in a 52px slot), which
   made the sidebar character larger than the picker preview and pushed it
   below the circle's centre. */
.acct-main .ac4-me-char .ac4-mascot{width:100%;height:100%;aspect-ratio:1/1}
.acct-main .acct-profile-card:hover .ac4-me-char{scale:1.06}
.acct-main .acct-profile-hover{z-index:2;border-radius:50%;transition:opacity .25s}

/* Profile character picker (same behaviour and timing as profile-settings.html) */
.acct-main .ac4-char-field{border:0;margin:0;padding:0;min-width:0}
.acct-main .ac4-char-legend{display:block;margin:0 0 8px;padding:0;color:var(--ac4-ink)}
.acct-main .ac4-char-hint{margin:-2px 0 14px;font-size:14px;line-height:1.45;color:rgba(12,11,15,.58)}
.acct-main .ac4-char-picker{display:grid;grid-template-columns:repeat(auto-fill,72px);gap:12px}
.acct-main .ac4-char-pick{position:relative;cursor:pointer}
.acct-main .ac4-char-pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.acct-main .ac4-char-tile{width:72px;height:72px;border-radius:50%;background:#f3f3f5;display:grid;place-items:center;position:relative;transition:background .25s,box-shadow .25s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.acct-main .ac4-char-tile .ac4-char-bounce{width:52px;height:52px}
.acct-main .ac4-char-pick:hover .ac4-char-tile{transform:translateY(-3px)}
.acct-main .ac4-char-pick input:checked+.ac4-char-tile{background:color-mix(in srgb,var(--c) 22%,#fff);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ac4-ink)}
.acct-main .ac4-char-pick input:focus-visible+.ac4-char-tile{outline:2px solid var(--ac4-ink);outline-offset:7px}
.acct-main .ac4-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.acct-main .ac4-char-bounce{display:grid;place-items:center;transform-origin:50% 100%}
.acct-main .ac4-mascot{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 90%}
/* Light blue (value "white") only: its artwork reads smaller inside the square
   viewBox, so it is drawn slightly larger in every surface that shows it. */
.acct-main .ac4-mascot.ac4-big{width:115%;height:auto;aspect-ratio:1/1}
.acct-main .ac4-mascot path{stroke-linecap:round;stroke-linejoin:round}
.acct-main .ac4-mascot .ac4-face{animation:ac4Look 7s ease-in-out infinite;animation-delay:var(--d,0s)}
.acct-main .ac4-mascot .ac4-eye{transform-box:fill-box;transform-origin:center;animation:ac4Blink 4.8s infinite;animation-delay:var(--d,0s)}
@keyframes ac4Look{
  0%,16%,100%{transform:translate(0,0)}
  24%,40%{transform:translate(-24px,4px)}
  50%,66%{transform:translate(22px,-8px)}
  74%,88%{transform:translate(0,-10px)}
}
@keyframes ac4Blink{
  0%,91%,99%,100%{transform:rotate(var(--tilt,0deg)) scaleY(1)}
  94%,96%{transform:rotate(var(--tilt,0deg)) scaleY(.1)}
}
/* Only the selected picker tile breathes. The applied character (sidebar and
   top bar) must keep the face look-around/blink alone — no up-and-down body
   squash. */
.acct-main .ac4-char-pick input:checked+.ac4-char-tile .ac4-mascot{animation:ac4Breathe 3.6s ease-in-out infinite}
@keyframes ac4Breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
.acct-main .ac4-char-bounce.ac4-boing{animation:ac4Boing .65s cubic-bezier(.3,.7,.4,1)}
.acct-main .ac4-char-bounce.ac4-boing .ac4-eye{animation:ac4Happy .65s ease}
@keyframes ac4Boing{
  0%{transform:scale(1,1) translateY(0)}
  18%{transform:scale(1.14,.84) translateY(0)}
  42%{transform:scale(.92,1.1) translateY(-16%)}
  66%{transform:scale(1.06,.94) translateY(0)}
  84%{transform:scale(.98,1.02) translateY(0)}
  100%{transform:scale(1,1) translateY(0)}
}
@keyframes ac4Happy{
  0%,100%{transform:rotate(var(--tilt,0deg)) scaleY(1)}
  20%,70%{transform:rotate(var(--tilt,0deg)) scaleY(.12)}
}
.acct-main .ac4-me-char.ac4-pop{animation:ac4Pop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes ac4Pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
.acct-main .ac4-spark{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;background:var(--c);animation:ac4Spark .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ac4Spark{
  0%{transform:translate(0,0) scale(.4);opacity:1}
  100%{transform:translate(var(--x),var(--y)) scale(1);opacity:0}
}
.acct-main .acct-profile-name{margin:0 0 3px;font-size:18px;font-weight:800;letter-spacing:.02em;overflow-wrap:anywhere}
.acct-main .acct-profile-email{font-size:13px;font-weight:500;color:var(--ac4-muted);overflow-wrap:anywhere}

/* Nav + sliding indicator */
.acct-main .acct-nav{position:relative;display:grid;gap:4px;padding:6px;border:1.5px solid var(--ac4-line);border-radius:26px;background:#fff}
.ac4-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:17px;background:#f1f1f5;pointer-events:none;opacity:0;transition:transform .55s var(--ac4-out),width .55s var(--ac4-out),height .55s var(--ac4-out),opacity .2s}
.ac4-ind.is-on{opacity:1}
.ac4-ind.no-anim{transition:none}
.acct-main .acct-nav .acct-nav-btn{position:relative;z-index:1;display:flex;align-items:center;gap:12px;height:48px;padding:0 16px;border-radius:17px;background:transparent !important;font:inherit;font-size:15px;font-weight:700;color:rgba(12,11,15,.5);transition:color .3s}
.acct-main .acct-nav .acct-nav-btn:hover,.acct-main .acct-nav .acct-nav-btn.active{color:var(--ac4-ink) !important}
.acct-main .acct-nav:not(.ac4-has-ind) .acct-nav-btn.active{background:#f1f1f5 !important}
.acct-main .acct-nav-btn svg{width:19px;height:19px;flex:none;transition:transform .45s var(--ac4-pop)}
.acct-main .acct-nav-btn:hover svg{transform:translateY(-1px) rotate(-6deg)}
.acct-main .acct-nav-btn:active svg{transform:scale(.9)}
.acct-main .acct-nav-btn:focus-visible,.acct-main .acct-signout-btn:focus-visible,.ac4-chip:focus-visible{outline:2px solid var(--ac4-ink);outline-offset:2px}

/* Sign out (moved under the nav card by the script) */
.acct-main .acct-signout-btn{display:flex;align-items:center;gap:10px;height:48px;margin-top:0;padding:0 20px;border-radius:17px;font:inherit;font-size:14.5px;font-weight:800;color:#d62b2b;transition:background .25s,color .25s}
.acct-main .acct-nav .acct-signout-btn{margin-top:8px}
.acct-main .acct-signout-btn:hover{background:#fdf0f0 !important;color:#d62b2b !important}
.acct-main .acct-signout-btn svg{width:18px;height:18px;flex:none;transition:transform .4s var(--ac4-pop)}
.acct-main .acct-signout-btn:hover svg{transform:translateX(2px)}

/* ───────── Content panel ───────── */
.acct-main .acct-content{min-width:0;min-height:420px;padding:clamp(22px,3vw,36px);border:1.5px solid var(--ac4-line);border-radius:26px;background:#fff}
.acct-main .acct-content.ac4-growing{overflow:hidden}

/* Filter chips */
.ac4-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.ac4-chips[hidden]{display:none}
.ac4-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:1.5px solid #e4e4e8;border-radius:99px;background:#fff;color:var(--ac4-ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .4s var(--ac4-pop)}
.ac4-chip:hover{border-color:var(--ac4-ink)}
.ac4-chip:active{transform:scale(.95)}
.ac4-chip[aria-pressed="true"]{background:var(--ac4-ink);border-color:var(--ac4-ink);color:#fff}
.ac4-chip i{font-style:normal;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.5}
.ac4-chip[aria-pressed="true"] i{opacity:.65}
.ac4-chip[data-n="0"]:not([aria-pressed="true"]){color:rgba(12,11,15,.45)}
.ac4-empty{display:grid;justify-items:center;gap:12px;margin:0;padding:34px 16px;border:1.5px dashed #dcdce0;border-radius:20px;text-align:center;color:rgba(12,11,15,.5);font-weight:600;animation:ac4In .6s var(--ac4-out) backwards}
.ac4-empty button{height:40px;padding:0 18px;border:0;border-radius:99px;background:var(--ac4-ink);color:#fff;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;transition:transform .35s var(--ac4-pop)}
.ac4-empty button:hover{transform:translateY(-2px)}

/* ───────── Order cards ───────── */
.acct-main .acct-orders-list{gap:14px}
.acct-main .acct-order-card{padding:20px 22px;border:1.5px solid var(--ac4-line);border-radius:22px;background:#fff;transition:box-shadow .45s var(--ac4-out),transform .5s var(--ac4-out),border-color .3s}
@media (hover:hover){.acct-main .acct-order-card:hover{transform:translateY(-3px);border-color:#e0e0e6;box-shadow:0 22px 34px -24px rgba(12,11,15,.3)}}
.acct-main .acct-order-header{margin-bottom:0;padding-bottom:16px;border-bottom:0;gap:12px}
.acct-main .acct-order-id{font-size:17px;font-weight:800}
.acct-main .acct-order-date{margin-top:3px;font-size:12.5px;font-weight:600;color:var(--ac4-muted)}
.acct-main .acct-order-items{margin-bottom:0;padding:14px 0;border-block:1px solid #f0f0f3}
.acct-main .acct-order-item-row{gap:14px;border-bottom-color:#f0f0f3}
.acct-main .acct-order-item-info{gap:14px;min-width:0}
.acct-main .acct-order-thumb,.acct-main .acct-order-thumb-empty{width:60px;height:60px;padding:0;border:0;border-radius:16px;background:#f5f5f7}
.acct-main .acct-order-item-name{font-size:15px;font-weight:800}
.acct-main .acct-order-item-meta{font-size:12.5px;font-weight:600;color:var(--ac4-muted)}
.acct-main .acct-order-item-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.acct-main .acct-order-footer{margin-top:0;padding-top:16px;border-top:0;gap:14px 20px}
.acct-main .acct-payment-label,.acct-main .acct-total-label{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--ac4-muted)}
.acct-main .acct-payment-detail{gap:8px}
.acct-main .acct-payment-icon{width:28px;height:28px;border-radius:8px;background:#f0f0f3}
.acct-main .acct-payment-name{font-size:14.5px;font-weight:800}
.acct-main .acct-total-amount{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.acct-main .acct-customer-update{border-radius:16px}
.acct-main .acct-digital-msg{border-radius:14px}
.acct-main .acct-order-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}

/* Pill buttons (cards, details, forms) */
.acct-main .acct-order-actions .button,#orderDetailsModal .acct-details-foot .button,.acct-main .acct-save-btn,.acct-main .acct-add-addr-btn,#addressModal .acct-addr-actions .button,.acct-main .acct-empty-state .button{height:48px;min-height:48px;padding:0 24px;border:0;border-radius:999px;font-size:14.5px;font-weight:800;box-shadow:none;transition:transform .35s var(--ac4-pop),background .25s,color .25s,box-shadow .25s}
.acct-main .acct-order-actions .button.primary-cta,#orderDetailsModal .acct-details-foot .button.primary-cta,.acct-main .acct-save-btn,.acct-main .acct-add-addr-btn,#addressModal .acct-addr-actions .button:not(.minimal-btn):not(.secondary):not(.ghost),.acct-main .acct-empty-state .button{background:var(--ac4-ink);color:#fff}
.acct-main .acct-order-actions .button.primary-cta:hover,#orderDetailsModal .acct-details-foot .button.primary-cta:hover,.acct-main .acct-save-btn:hover,.acct-main .acct-add-addr-btn:hover,.acct-main .acct-empty-state .button:hover{background:#2b2a31;transform:translateY(-2px);box-shadow:0 14px 24px -16px rgba(12,11,15,.6)}
.acct-main .acct-order-actions .button.minimal-btn,#orderDetailsModal .acct-details-foot .button.minimal-btn,#addressModal .acct-addr-actions .button.minimal-btn,#addressModal .acct-addr-actions .button.secondary,#addressModal .acct-addr-actions .button.ghost{background:#fff;color:var(--ac4-ink);box-shadow:inset 0 0 0 1.5px #dcdce0}
.acct-main .acct-order-actions .button.minimal-btn:hover,#orderDetailsModal .acct-details-foot .button.minimal-btn:hover,#addressModal .acct-addr-actions .button.minimal-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--ac4-ink)}
.acct-main .acct-order-actions .button:active,#orderDetailsModal .acct-details-foot .button:active,.acct-main .acct-save-btn:active,.acct-main .acct-add-addr-btn:active{transform:scale(.96)}
.acct-main .acct-add-addr-btn{height:44px;min-height:44px;padding:0 20px;flex:none}

/* Status pills: soft, borderless, with a status dot */
.acct-main .order-status-pill,#orderDetailsModal .order-status-pill{gap:7px;height:28px;padding:0 12px;border:0;font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.acct-main .order-status-pill::before,#orderDetailsModal .order-status-pill::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}
.acct-main .status-new,.acct-main .status-paid,.acct-main .status-delivered,#orderDetailsModal .status-new,#orderDetailsModal .status-paid,#orderDetailsModal .status-delivered{background:#e9f7ee;color:#1a7f3c}
.acct-main .status-awaiting_review,.acct-main .status-pending_review,.acct-main .status-review,#orderDetailsModal .status-awaiting_review,#orderDetailsModal .status-pending_review,#orderDetailsModal .status-review{background:#fff1c2;color:#7a5600}
.acct-main .status-shipped,#orderDetailsModal .status-shipped{background:#e8f1ff;color:#1d4fb8}
.acct-main .status-awaiting_review::before,#orderDetailsModal .status-awaiting_review::before{animation:ac4Live 1.8s ease-in-out infinite}
@keyframes ac4Live{0%,100%{box-shadow:0 0 0 0 rgba(122,86,0,.35)}50%{box-shadow:0 0 0 4px rgba(122,86,0,0)}}

/* Pagination */
.acct-main .acct-page-btn{border:1.5px solid #e4e4e8;border-radius:99px;transition:background .25s,border-color .25s,color .25s,transform .35s var(--ac4-pop)}
.acct-main .acct-page-btn:active:not(:disabled){transform:scale(.94)}

/* Empty + skeleton */
.acct-main .acct-empty-state{border:1.5px dashed #dcdce0;border-radius:22px;background:#fff}
.acct-main .acct-empty-state .button{width:auto}
.acct-main .acct-empty-title{font-family:"PcoBricolage",Inter,ui-sans-serif,system-ui,sans-serif;font-weight:800;font-stretch:75%;text-transform:uppercase;font-size:24px}
.acct-main .acct-skeleton-card{border:1.5px solid var(--ac4-line);border-radius:22px}
.acct-main .acct-skeleton-card+.acct-skeleton-card{margin-top:14px}
.acct-main .acct-skeleton-btn{border-radius:99px}

/* ───────── Profile form + addresses ───────── */
.acct-main .acct-profile-form{gap:16px;max-width:520px}
.acct-main .acct-profile-form .field,#addressModal .field{border-radius:14px;transition:border-color .25s,box-shadow .25s}
.acct-main .acct-profile-form .field:focus,#addressModal .field:focus{box-shadow:0 0 0 4px rgba(12,11,15,.08)}
.acct-main .acct-field-label{font-size:12px;letter-spacing:.08em}
.acct-main .acct-save-btn{width:fit-content;margin-top:8px}
.acct-main .acct-address-list{gap:14px !important}
.acct-main .acct-address-card{padding:20px 22px;border:1.5px solid var(--ac4-line);border-radius:22px;background:#fff;transition:box-shadow .45s var(--ac4-out),transform .5s var(--ac4-out),border-color .3s}
@media (hover:hover){.acct-main .acct-address-card:hover{transform:translateY(-3px);border-color:#e0e0e6;box-shadow:0 22px 34px -24px rgba(12,11,15,.3)}}
.acct-main .acct-address-badge{height:24px;padding:0 10px;border-radius:7px;display:inline-flex;align-items:center;font-size:10px;font-weight:800;letter-spacing:.1em}
.acct-main .acct-address-name{font-size:18px;font-weight:800}
.acct-main .acct-address-details{font-size:14.5px;line-height:1.55;color:rgba(12,11,15,.62)}
.acct-main .acct-address-actions{gap:16px}
.acct-main .acct-address-actions .text-link{padding:0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:700;color:rgba(12,11,15,.65);text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s}
.acct-main .acct-address-actions .text-link:hover{color:var(--ac4-ink)}
.acct-main .acct-address-actions .text-link[style*="danger"]{color:#d62b2b !important}
.acct-main .acct-addr-empty{border:1.5px dashed #dcdce0;border-radius:20px;background:#fff}
.acct-main .acct-logged-out{border:1.5px solid var(--ac4-line);border-radius:26px}
.acct-main .acct-logged-out h2{font-size:clamp(28px,3.4vw,40px)}
.acct-main .acct-logged-out .button{width:auto;height:52px;padding:0 30px;border-radius:999px}

/* ───────── Entrance (page) ─────────
   Boxes rise in once the page transition has lifted (html.pmx-entered). */
.acct-main .acct-profile-card,.acct-main .acct-content,.acct-main .acct-logged-out{--ac4-i:0}
.acct-main .acct-nav{--ac4-i:1}
.acct-main .acct-content{--ac4-i:1}
.acct-main .acct-sidebar>.acct-signout-btn{--ac4-i:2}
html.pmx-js:not(.pmx-entered) .ac4-ln>span{transform:translateY(112%);animation:ac4Safe 0s linear 3.5s forwards}
html.pmx-entered .ac4-ln>span{transform:none;transition:transform 1.1s var(--ac4-out) .04s}
html.pmx-js:not(.pmx-entered) .acct-main :is(.acct-profile-card,.acct-nav,.acct-sidebar>.acct-signout-btn,.acct-content,.acct-logged-out){opacity:0;animation:ac4Safe 0s linear 3.5s forwards}
html.pmx-entered .acct-main :is(.acct-profile-card,.acct-nav,.acct-sidebar>.acct-signout-btn,.acct-content,.acct-logged-out){animation:ac4In .9s var(--ac4-out) backwards;animation-delay:calc(var(--ac4-i,0) * 110ms + 140ms)}
@keyframes ac4In{from{opacity:0;transform:translate3d(0,26px,0)}}
@keyframes ac4Safe{to{opacity:1;transform:none}}

/* Cards + tab content (classes set by js/pacco-account-v4.js) */
.acct-main .ac4-card-in{animation:ac4In .8s var(--ac4-out) backwards;animation-delay:calc(var(--ac4-k,0) * 85ms + var(--ac4-d,0ms))}
.acct-main .account-tab.ac4-enter>*{animation:ac4Tab .62s var(--ac4-out) backwards;animation-delay:calc(var(--ac4-k,0) * 70ms + 30ms)}
@keyframes ac4Tab{from{opacity:0;transform:translate3d(0,18px,0)}}

/* ───────── Order details ───────── */
#orderDetailsModal.modal{transition:opacity .3s ease,visibility 0s linear .32s}
#orderDetailsModal.modal.open{transition:opacity .26s ease,visibility 0s linear 0s}
#orderDetailsModal.modal::before,#addressModal.modal::before{background:rgba(12,11,15,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#orderDetailsModal .acct-details-panel{--ac4-out:cubic-bezier(.16,1,.3,1);--ac4-ink:#0c0b0f;width:min(860px,94vw);border:0;border-radius:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45);opacity:0;transform:translateY(24px) scale(.96);transition:transform .3s cubic-bezier(.5,0,.8,.4),opacity .26s ease}
#orderDetailsModal.open .acct-details-panel{opacity:1;transform:none;transition:transform .6s var(--ac4-out),opacity .3s ease}
#orderDetailsModal .acct-details-head{align-items:center;padding:26px 30px 20px;border-bottom:1px solid var(--ac4-line,#ececf0)}
#orderDetailsModal .acct-details-head h2{margin:0 0 6px;font-size:clamp(26px,3vw,34px)}
#orderDetailsModal .acct-details-head p{font-size:13px;font-weight:500;color:rgba(12,11,15,.55)}
#orderDetailsModal .modal-close-btn,#addressModal .modal-close-btn{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border:1.5px solid #e4e4e8;border-radius:50%;background:#fff;color:#0c0b0f;cursor:pointer;transition:transform .45s cubic-bezier(.34,1.45,.55,1),border-color .25s,background .25s}
#orderDetailsModal .modal-close-btn:hover,#addressModal .modal-close-btn:hover{transform:rotate(90deg);border-color:#0c0b0f}
#orderDetailsModal .acct-details-inner{padding:24px 30px}
#orderDetailsModal .acct-details-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px}
#orderDetailsModal .acct-details-col{gap:16px}
#orderDetailsModal .acct-details-subhead{margin:0 0 12px;font-size:11px;font-weight:800;letter-spacing:.1em;color:rgba(12,11,15,.5)}
#orderDetailsModal .acct-det-item{gap:14px}
#orderDetailsModal .acct-det-thumb,#orderDetailsModal .acct-det-item.large .acct-det-thumb{width:64px;height:64px;padding:0;border:0;border-radius:16px;background:#f5f5f7}
#orderDetailsModal .acct-det-item.large strong.acct-det-name{font-size:15px}
#orderDetailsModal .acct-det-name{font-weight:800}
#orderDetailsModal .acct-det-variant{font-size:12.5px;font-weight:600;color:rgba(12,11,15,.55)}
#orderDetailsModal .acct-det-price{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
#orderDetailsModal .acct-detail-summary{padding:16px 18px;border:0;border-radius:18px;background:#f7f7f9}
#orderDetailsModal .acct-summary-row{font-size:14px}
#orderDetailsModal .acct-summary-row+.acct-summary-row{margin-top:10px}
#orderDetailsModal .acct-summary-value{font-weight:800;font-variant-numeric:tabular-nums}
#orderDetailsModal .acct-summary-total{margin-top:10px;padding-top:10px;border-top:1px dashed #dcdce0;font-size:16px}
#orderDetailsModal .acct-det-status-box{gap:14px}
#orderDetailsModal .acct-det-status-card{padding:18px 20px;border:0;border-radius:20px;background:#f7f7f9}
#orderDetailsModal .acct-det-status-head{margin-bottom:14px;gap:10px}
#orderDetailsModal .acct-det-status-meta{font-size:12.5px;font-weight:700;color:rgba(12,11,15,.55)}
#orderDetailsModal .acct-tracking-card,#orderDetailsModal .acct-pending-card,#orderDetailsModal .acct-digital-card{border-radius:16px}
#orderDetailsModal .acct-pending-card{padding:14px 16px;border:1.5px dashed #dcdce0;background:#fff}
#orderDetailsModal .acct-pending-card p{font-size:13px;line-height:1.5;font-weight:600;color:rgba(12,11,15,.6)}
#orderDetailsModal .acct-archive-btn{height:44px;border-radius:999px;border-width:1.5px}
#orderDetailsModal .acct-details-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 30px 24px;border-top:1px solid #ececf0;background:#fff}
#orderDetailsModal .acct-details-foot .button{width:100%;height:54px;min-height:54px}

/* Status timeline: dots + a line that fills step by step */
#orderDetailsModal .acct-timeline{margin-top:2px;padding-left:0}
#orderDetailsModal .acct-timeline::before{display:none}
#orderDetailsModal .acct-timeline-item{position:relative;display:flex;align-items:center;gap:14px;min-height:36px;padding:0}
#orderDetailsModal .acct-timeline-item:nth-child(2){--ac4-k:1}#orderDetailsModal .acct-timeline-item:nth-child(3){--ac4-k:2}#orderDetailsModal .acct-timeline-item:nth-child(4){--ac4-k:3}#orderDetailsModal .acct-timeline-item:nth-child(5){--ac4-k:4}#orderDetailsModal .acct-timeline-item:nth-child(6){--ac4-k:5}
#orderDetailsModal .acct-timeline-dot{position:relative;left:auto;top:auto;z-index:1;flex:none;box-sizing:border-box;width:14px;height:14px;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #d4d4da;transition:box-shadow .3s}
#orderDetailsModal .acct-timeline-item:not(:last-child)::after{content:"";position:absolute;left:6px;top:25px;bottom:-11px;width:2px;border-radius:2px;background:#e1e1e6}
#orderDetailsModal .acct-timeline-label{font-size:14px;font-weight:700;color:rgba(12,11,15,.38)}
#orderDetailsModal .acct-timeline-item.active .acct-timeline-label{color:#0c0b0f}
#orderDetailsModal .acct-timeline-item.active .acct-timeline-dot{background:#0c0b0f;box-shadow:none}
#orderDetailsModal .acct-timeline-item.active:has(+ .acct-timeline-item.active)::after{background:#0c0b0f;transform-origin:top}
#orderDetailsModal .acct-timeline-item.active:not(:has(+ .acct-timeline-item.active)) .acct-timeline-dot{box-shadow:0 0 0 4px rgba(12,11,15,.14)}
/* Per-status colour — each step carries its own colour, matching its status pill (Review amber, Paid green, Preparing orange, Shipped blue, Done purple) */
#orderDetailsModal .acct-timeline-item:nth-child(1){--tl:#f2b01e;--tlr:rgba(242,176,30,.24);--tli:#7a5600;--tln:#22a653}
#orderDetailsModal .acct-timeline-item:nth-child(2){--tl:#22a653;--tlr:rgba(34,166,83,.22);--tli:#1a7f3c;--tln:#f2872b}
#orderDetailsModal .acct-timeline-item:nth-child(3){--tl:#f2872b;--tlr:rgba(242,135,43,.22);--tli:#9a3412;--tln:#2f6fe0}
#orderDetailsModal .acct-timeline-item:nth-child(4){--tl:#2f6fe0;--tlr:rgba(47,111,224,.22);--tli:#1d4fb8;--tln:#9448cf}
#orderDetailsModal .acct-timeline-item:nth-child(5){--tl:#9448cf;--tlr:rgba(148,72,207,.22);--tli:#6a1b9a;--tln:#9448cf}
/* Only the CURRENT step carries colour; passed steps are a filled, lighter grey (dot + connector). */
#orderDetailsModal .acct-timeline-item.active .acct-timeline-dot{background:#cfcfd6}
#orderDetailsModal .acct-timeline-item.active:not(:has(+ .acct-timeline-item.active)) .acct-timeline-dot{background:var(--tl)}
#orderDetailsModal .acct-timeline-item.active:not(:has(+ .acct-timeline-item.active)) .acct-timeline-dot{box-shadow:0 0 0 4px var(--tlr)}
#orderDetailsModal .acct-timeline-item.active:not(:has(+ .acct-timeline-item.active)) .acct-timeline-label{color:var(--tli)}
#orderDetailsModal .acct-timeline-item.active:has(+ .acct-timeline-item.active)::after{background:#cfcfd6}
#orderDetailsModal .acct-det-status-meta{display:inline-flex;align-items:center;gap:6px}
#orderDetailsModal .acct-det-status-meta::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#22a653}
#orderDetailsModal .acct-det-status-meta.pay-paid{color:#1a7f3c}
#orderDetailsModal .acct-det-status-meta.pay-pending,#orderDetailsModal .acct-det-status-meta.pay-pendingreview,#orderDetailsModal .acct-det-status-meta.pay-awaitingreview,#orderDetailsModal .acct-det-status-meta.pay-unpaid{color:#7a5600}
#orderDetailsModal .acct-det-status-meta.pay-pending::before,#orderDetailsModal .acct-det-status-meta.pay-pendingreview::before,#orderDetailsModal .acct-det-status-meta.pay-awaitingreview::before,#orderDetailsModal .acct-det-status-meta.pay-unpaid::before{background:#f2b01e}
#orderDetailsModal .acct-det-status-meta.pay-refunded,#orderDetailsModal .acct-det-status-meta.pay-failed{color:#b91c1c}
#orderDetailsModal .acct-det-status-meta.pay-refunded::before,#orderDetailsModal .acct-det-status-meta.pay-failed::before{background:#e5321f}

/* Open: staggered columns, timeline steps slide in, the line fills */
#orderDetailsModal.open .acct-details-head{animation:ac4In .52s var(--ac4-out) .08s backwards}
#orderDetailsModal.open .acct-details-col:first-child{animation:ac4Tab .52s var(--ac4-out) .17s backwards}
#orderDetailsModal.open .acct-details-col+.acct-details-col{animation:ac4Tab .52s var(--ac4-out) .28s backwards}
#orderDetailsModal.open .acct-details-foot{animation:ac4Tab .52s var(--ac4-out) .39s backwards}
#orderDetailsModal.open .acct-timeline-item{animation:ac4Step .42s var(--ac4-out) backwards;animation-delay:calc(var(--ac4-k,0) * 90ms + 360ms)}
#orderDetailsModal.open .acct-timeline-item.active:has(+ .acct-timeline-item.active)::after{animation:ac4Fill .5s var(--ac4-out) backwards;animation-delay:calc(var(--ac4-k,0) * 90ms + 440ms)}
@keyframes ac4Step{from{opacity:0;transform:translateX(-10px)}}
@keyframes ac4Fill{from{transform:scaleY(0)}}

/* Address modal: same window language */
#addressModal.modal{transition:opacity .3s ease,visibility 0s linear .32s}
#addressModal.modal.open{transition:opacity .26s ease,visibility 0s linear 0s}
#addressModal .acct-addr-panel{border:0;border-radius:28px;box-shadow:0 40px 90px -30px rgba(0,0,0,.45);opacity:0;transform:translateY(24px) scale(.96);transition:transform .3s cubic-bezier(.5,0,.8,.4),opacity .26s ease}
#addressModal.open .acct-addr-panel{opacity:1;transform:none;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .3s ease}
#addressModal .acct-addr-modal-title{font-size:clamp(24px,2.6vw,30px)}
#addressModal .acct-addr-actions .button{flex:1}

/* ───────── Tablet + phone: one column ───────── */
@media (max-width:860px){
  .acct-main .acct-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .acct-main .acct-sidebar{position:relative !important;top:auto;display:grid !important;grid-template-columns:minmax(0,1fr);gap:12px !important;border:0 !important;border-radius:0 !important;background:transparent !important;overflow:visible !important}
  .acct-main .acct-profile-card{display:grid !important;grid-template-columns:auto minmax(0,1fr);align-items:center !important;column-gap:14px;gap:0 14px !important;padding:16px 150px 16px 18px !important;text-align:left !important;border:1.5px solid var(--ac4-line) !important;border-radius:26px !important;background:#fff !important}
  .acct-main .acct-profile-avatar{width:64px !important;height:64px !important;margin:0 !important}
  .acct-main .acct-profile-text{display:grid !important;min-width:0 !important}
  .acct-main .acct-profile-name{font-size:17px !important;margin:0 0 2px !important}
  .acct-main .acct-profile-email{font-size:13px !important;margin:0 !important}
  .acct-main .acct-profile-hover{display:none !important}
  .acct-main .acct-sidebar>.acct-nav{border-top:1.5px solid var(--ac4-line) !important}
  .acct-main .acct-nav{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px !important;padding:6px !important;border:1.5px solid var(--ac4-line) !important;border-radius:22px !important;background:#fff !important}
  .acct-main .acct-nav .acct-nav-btn{justify-content:center;gap:8px;min-width:0 !important;height:46px;padding:0 8px !important;border:0 !important;border-radius:16px !important;font-size:14px !important;text-align:center !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  .acct-main .acct-nav-btn svg{width:17px;height:17px}
  .acct-main .acct-nav .acct-signout-btn{grid-column:1/-1}
  .acct-main .acct-sidebar>.acct-signout-btn{position:absolute;top:27px;right:16px;height:44px !important;margin:0 !important;padding:0 16px !important;gap:8px !important;border-radius:99px !important;font-size:13.5px !important;font-weight:800 !important;justify-content:center !important;box-shadow:inset 0 0 0 1.5px #f3d3d3;white-space:nowrap !important;overflow:visible !important;flex:none !important}
  .acct-main .acct-sidebar>.acct-signout-btn svg{display:block !important;width:17px;height:17px}
  .acct-main .acct-content{min-height:0}
  #orderDetailsModal .acct-details-grid{grid-template-columns:minmax(0,1fr) !important}
  #orderDetailsModal .acct-details-inner{padding:20px}
  #orderDetailsModal .acct-details-head{padding:22px 20px 16px}
  #orderDetailsModal .acct-details-foot{padding:16px 20px calc(18px + env(safe-area-inset-bottom,0px))}
}

/* Phones (≤767: store-account.css turns the sidebar into one card — the v4
   layer keeps two cards: profile + segmented nav) */
@media (max-width:767px){
  .acct-main .acct-container{padding-top:22px}
  .acct-main .acct-nav .acct-nav-btn{flex:none !important;font-size:14px !important;color:rgba(12,11,15,.5)}
  .acct-main .acct-nav .acct-nav-btn.active,.acct-main .acct-nav .acct-nav-btn:hover{color:var(--ac4-ink) !important}
  .acct-main .acct-content{padding:22px 18px !important;border-radius:24px !important}
  .acct-main .acct-order-card{padding:16px 16px 18px !important;border-radius:20px !important}
  .acct-main .acct-order-header{margin-bottom:0 !important;padding-bottom:12px !important}
  .acct-main .acct-order-id{font-size:16px !important}
  .acct-main .acct-order-date{font-size:12.5px !important}
  .acct-main .acct-order-items{margin-bottom:0 !important;padding:12px 0}
  .acct-main .acct-order-thumb,.acct-main .acct-order-thumb-empty{width:52px !important;height:52px !important;border-radius:14px !important}
  .acct-main .acct-order-item-name{font-size:14.5px !important}
  .acct-main .acct-order-item-meta{font-size:12px !important}
  .acct-main .acct-order-item-price{font-size:14.5px !important}
  .acct-main .acct-order-footer{margin-top:0 !important;padding-top:12px !important}
  .acct-main .acct-total-amount{font-size:22px !important}
  .acct-main .acct-order-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px !important}
  .acct-main .acct-order-actions .button{height:46px !important;min-height:46px !important;padding:0 12px !important;font-size:14px !important;border-radius:999px !important}
  .acct-main .order-status-pill{height:26px;padding:0 10px !important;font-size:10.5px !important}
  /* Order details: full-screen page that rises from the bottom */
  #orderDetailsModal .acct-details-panel,#orderDetailsModal .modal-panel{opacity:0;transform:translate3d(0,7%,0) !important;transition:transform .3s cubic-bezier(.5,0,.8,.4),opacity .24s ease !important;border-radius:0 !important;box-shadow:none}
  #orderDetailsModal.open .acct-details-panel,#orderDetailsModal.open .modal-panel{opacity:1;transform:none !important;transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .3s ease !important}
  #orderDetailsModal .acct-details-panel{display:flex;flex-direction:column}
  #orderDetailsModal .acct-details-head{position:sticky;top:0;z-index:3;background:#fff;padding:16px 16px 14px !important}
  #orderDetailsModal .acct-details-body{flex:1;max-height:none}
  #orderDetailsModal .acct-details-inner{padding:18px 16px !important}
  #orderDetailsModal .acct-details-foot{position:sticky;bottom:0;z-index:3;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px)) !important}
  #orderDetailsModal .acct-details-foot .button{height:50px;min-height:50px}
}
@media (max-width:560px){
  .acct-main .acct-profile-card{padding-right:72px !important}
  .acct-main .acct-sidebar>.acct-signout-btn{right:14px;width:44px;padding:0 !important;font-size:0 !important;gap:0 !important}
  .acct-main .acct-nav-btn svg{display:none}
  /* Phone chips: one row — small enough that All / In review / Paid / Shipped
     fit the narrowest phones (the old sizes wrapped "Shipped" to a 2nd row;
     wrap is kept only as an extreme fallback, never a scroller). */
  .acct-main .ac4-chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;gap:5px}
  .acct-main .ac4-chip{flex:0 0 auto;height:30px;padding:0 9px;font-size:11px;gap:4px}
  .acct-main .ac4-chip i{font-size:9.5px}
  .acct-main .acct-addresses{flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){
  html.pmx-js .ac4-ln>span,html.pmx-js .acct-main :is(.acct-profile-card,.acct-nav,.acct-sidebar>.acct-signout-btn,.acct-content,.acct-logged-out){opacity:1 !important;transform:none !important;animation:none !important;transition:none !important}
  .acct-main .ac4-card-in,.acct-main .account-tab.ac4-enter>*,.ac4-empty,#orderDetailsModal.open *,#orderDetailsModal.open .acct-timeline-item::after{animation:none !important}
  .ac4-ind,#orderDetailsModal .acct-details-panel,#addressModal .acct-addr-panel{transition:none !important}
  .acct-main .order-status-pill::before{animation:none !important}
  .acct-main .ac4-mascot .ac4-face,.acct-main .ac4-mascot .ac4-eye,.acct-main .ac4-mascot,.acct-main .ac4-char-bounce,.acct-main .ac4-me-char,.acct-main .ac4-spark{animation:none !important;transition:none !important}
  .acct-main .ac4-char-pick:hover .ac4-char-tile{transform:none}
}