/* My Account — Orders 17572:14345 · Wishlist 17572:15109 · Compare 17574:16078
   Billing 17575:16704 · Account Settings 18066:74789

   Content pad 40/185/64/185 gap 24 · body 1550 gap 32, both columns top.
   Web/Account Nav is a bare 260 stack — no card, no border, no hover state
   (Figma defines none, so neither do we).                                  */

.acct { padding: 40px 0 64px; display: flex; flex-direction: column; gap: 24px;
        background: var(--wrc-bg, #f8f8f8); }
.acct__title { font: 400 36px/128% Inter, sans-serif; color: #101828; margin: 0; }
.acct__body { width: 1550px; max-width: 100%; display: flex; align-items: flex-start; gap: 32px; }
.acct__panels { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.acct__sec { font: 400 30px/128% Inter, sans-serif; color: #101828; margin: 0; }

/* ---- nav ---------------------------------------------------------------- */
.anav { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; gap: 10px; }
.anav__list { display: flex; flex-direction: column; gap: 4px; }
.anav__i { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
           border-radius: 8px; text-decoration: none;
           font: 500 16px/128% Inter, sans-serif; color: #364153; }
.anav__i svg { flex: 0 0 18px; fill: #656772; }
.anav__i.is-active { background: rgba(0, 128, 95, .07); color: #00805f; font-weight: 600; }
.anav__i.is-active svg { fill: #00805f; }
.anav__out { display: flex; flex-direction: column; gap: 10px; }
.anav__rule { display: block; width: 260px; height: 1px; background: rgba(0, 0, 0, .07); }

.acct__empty { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); border-radius: 12px;
               padding: 48px 24px; text-align: center; }
.acct__empty h3 { font: 600 20px/128% Inter, sans-serif; color: #101828; margin: 0 0 6px; }
.acct__empty p  { font: 400 14px/145% Inter, sans-serif; color: #656772; margin: 0; }

/* ---- Web/Order Card ------------------------------------------------------ */
.ocard { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
         border-radius: 12px; overflow: hidden; }
.ocard__head { display: flex; align-items: center; justify-content: space-between; gap: 24px;
               padding: 16px 20px; background: #f8f8f8; }
.ocard__meta { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.ocard__no   { font: 600 16px/128% Inter, sans-serif; color: #101828; }
.ocard__date { font: 500 14px/128% Inter, sans-serif; color: #656772; }
/* The colour comes from the shared status scale (`spill--*`); this only sets
   the shape and the type. */
.ocard__st   { padding: 5px 10px; border-radius: 999px;
               font: 600 14px/128% Inter, sans-serif; white-space: nowrap; }
.ocard__body { display: flex; align-items: center; gap: 20px; padding: 16px 20px; }
.ocard__thumbs { display: flex; gap: 8px; flex: 0 0 auto; }
.ocard__thumb  { width: 56px; height: 42px; border-radius: 6px; background: #f0f0f0 center/cover no-repeat; }
.ocard__sum   { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ocard__line  { font: 400 16px/128% Inter, sans-serif; color: #101828; }
.ocard__sub   { font: 500 14px/128% Inter, sans-serif; color: #656772; }
.ocard__total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.ocard__tk    { font: 400 12px/128% Inter, sans-serif; color: #656772; }
.ocard__tv    { font: 600 24px/128% Inter, sans-serif; color: #101828; font-variant-numeric: tabular-nums; }
.ocard__acts  { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 18px; }
.ocard__b     { height: 48px; border-radius: 10px; font: 600 16px/1 Inter, sans-serif;
                display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ocard__acts .btn--outline { width: 147px; }
.ocard__acts .btn--green   { width: 150px; }

/* ---- Wishlist ------------------------------------------------------------ */
/* Data/Item Card at a fixed 272 with a 20px gap, left-packed — not a stretching
   grid, so a short last row keeps the same card width. */
.wlgrid { display: flex; flex-wrap: wrap; gap: 20px; }
.wlgrid > .icard { flex: 0 0 272px; width: 272px; }

/* ---- Compare ------------------------------------------------------------- */
.cmp { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
       border-radius: 12px; overflow: hidden; }
.cmp__head { display: flex; align-items: flex-start; }
.cmp__spacer { flex: 0 0 190px; width: 190px; height: 10px; }
.cmp__col { flex: 0 0 230px; width: 230px; display: flex; flex-direction: column;
            gap: 8px; padding: 16px 12px; }
/* the column rules run 307px, stopping short of the 326px head — as drawn */
.cmp__col.has-rule { position: relative; }
.cmp__col.has-rule::before { content: ""; position: absolute; left: 0; top: 0;
  width: 1px; height: 307px; background: rgba(0, 0, 0, .07); }
.cmp__img { display: block; width: 100%; height: 168px; border-radius: 8px;
            background: #f8f8f8 center/cover no-repeat; }
.cmp__t { font: 500 14px/128% Inter, sans-serif; color: #101828; text-decoration: none;
          height: 36px; display: -webkit-box; -webkit-line-clamp: 2;
          -webkit-box-orient: vertical; overflow: hidden; }
.cmp__t:hover { color: #00805f; }
.cmp__p { font: 400 20px/128% Inter, sans-serif; color: #e55a33; height: 26px; }
.cmp__add { height: 40px; flex: 0 0 40px; border-radius: 8px;
             font: 600 14px/1 Inter, sans-serif; }

/* attribute rows are 190 + n x 230 wide, NOT the full card — the zebra fill
   and the top rule stop short, leaving a white gutter on the right. */
.cmp__row { display: flex; align-items: center; height: 44px; width: max-content;
            border-top: 1px solid rgba(0, 0, 0, .07); }
.cmp__row.is-alt { background: #f8f8f8; }
.cmp__k { flex: 0 0 190px; width: 190px; padding: 0 12px;
          font: 500 14px/128% Inter, sans-serif; color: #656772; }
.cmp__v { flex: 0 0 230px; width: 230px; padding: 0 12px; align-self: stretch;
          display: flex; align-items: center;
          font: 400 14px/128% Inter, sans-serif; color: #101828; }
.cmp__v.has-rule { border-left: 1px solid rgba(0, 0, 0, .07); }

/* ---- Billing + Settings panels ------------------------------------------
   Panel card shell: FILL x HUG, pad 24, gap 18, r12, 1px #000@7% — white on
   every panel except "How we use your information", which is #f8f8f8.
   Inner content width is 1258 - 48 = 1210.                                 */
.apanel { background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); border-radius: 12px;
          padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.apanel--grey { background: #f8f8f8; }

/* Web/Panel Header — 31 title-only, 48 with a button (the button sets it) */
.apanel__hd { display: flex; align-items: center; justify-content: space-between; gap: 16px;
              min-height: 31px; }
.apanel__hd.has-act { min-height: 48px; }
.apanel__ht { font: 400 24px/128% Inter, sans-serif; color: #101828; margin: 0; }

/* Action/Button Web — Brand=WRC, Type=Secondary */
.wbtn2 { height: 48px; padding: 0 31px; border-radius: 10px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); border: 0; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         font: 600 16px/1 Inter, sans-serif; color: #364153; white-space: nowrap; }
.wbtn2:hover { background: #f8f8f8; }
/* Type=Destructive — an outline, never a solid red fill */
.wbtn2--danger { box-shadow: inset 0 0 0 1px #e55a33; color: #e55a33; }
.wbtn2--danger:hover { background: #fff; }

.apanel__cards { display: flex; flex-direction: column; gap: 10px; }
.apanel__fields { display: flex; gap: 16px; }
.apanel__fields > .afield { flex: 1 1 0; min-width: 0; }
.apanel__helper { font: 400 12px/128% Inter, sans-serif; color: #656772; margin: 0; }
.apanel__body { font: 400 16px/128% Inter, sans-serif; color: #364153; margin: 0; }
.apanel__note { font: 500 14px/128% Inter, sans-serif; color: #364153; margin: 0; }
.apanel__acts { display: flex; }

/* billing terms — caption over value, laid left to right with a 40px gap,
   left-packed rather than distributed */
.apanel__terms { display: flex; gap: 40px; }
.apanel__term { display: flex; flex-direction: column; gap: 3px; }
.apanel__tk { font: 400 12px/128% Inter, sans-serif; color: #656772; }
.apanel__tv { font: 600 16px/128% Inter, sans-serif; color: #101828;
              font-variant-numeric: tabular-nums; }

/* Web/Address Card — badge · body · actions, all TOP aligned, 1px #000@15%
   (heavier than the 7% used on the panels themselves) */
.acard { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
         border-radius: 8px; background: #fff; }
.acard__badge { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px;
                background: #f8f8f8; display: inline-flex; align-items: center;
                justify-content: center; }
.acard__badge svg { fill: #364153; }
.acard__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.acard__top { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.acard__label { font: 600 16px/128% Inter, sans-serif; color: #101828; }
.acard__chip { padding: 3px 8px; border-radius: 999px; background: rgba(0, 128, 95, .07);
               font: 500 10px/normal Inter, sans-serif; color: #00805f; }
.acard__addr { font: 500 14px/128% Inter, sans-serif; color: #656772; }
.acard__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 32px; }
.acard__mk { height: 32px; padding: 0 12px; border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); border: 0; cursor: pointer;
             font: 500 14px/128% Inter, sans-serif; color: #364153; white-space: nowrap; }
.acard__mk.is-dark { color: #101828; }
.acard__mk:hover { background: #f8f8f8; }
.acard__ib { width: 32px; height: 32px; border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); border: 0; cursor: pointer;
             display: inline-flex; align-items: center; justify-content: center; }
.acard__ib:hover { background: #f8f8f8; }
.acard__ib.is-edit svg { fill: #656772; }
/* the trash glyph is the only orange on the page — the button chrome stays neutral */
.acard__ib.is-del svg { fill: #e55a33; }

/* Web/Field, Type=Text State=Disabled — a populated read-only value */
.afield { display: flex; flex-direction: column; gap: 6px; }
.afield__k { font: 500 16px/1.2 Inter, sans-serif; color: #101828; }
.afield__v { min-height: 46px; display: flex; align-items: center; padding: 13px 14px;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); border-radius: 8px; background: #f8f8f8;
             font: 400 16px/128% Inter, sans-serif; color: #656772; }

/* the email box is NOT that field: no border, and darker text */
.aemail { min-height: 46px; display: flex; align-items: center; padding: 13px 14px;
          border-radius: 8px; background: #f8f8f8;
          font: 400 16px/128% Inter, sans-serif; color: #101828; }

/* Web/Alert, Tone=Info — bulb + title + body, on its own grey card */
.aalert { display: flex; gap: 12px; padding: 14px; border-radius: 8px;
          background: #f8f8f8; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.aalert > svg { flex: 0 0 20px; fill: #364153; }
.aalert__t { display: flex; flex-direction: column; gap: 4px; }
.aalert__t strong { font: 600 16px/128% Inter, sans-serif; color: #101828; }
.aalert__t span  { font: 500 14px/128% Inter, sans-serif; color: #364153; }

/* the privacy disclaimer is bare — the panel around it is already grey */
.adisc { display: flex; gap: 12px; }
.adisc > svg { flex: 0 0 20px; fill: #364153; }
.adisc__t { display: flex; flex-direction: column; gap: 8px; }
.adisc__t span { font: 400 16px/128% Inter, sans-serif; color: #364153; }
.adisc__link { font: 600 14px/128% Inter, sans-serif; color: #00805f; text-decoration: none; }

@media (max-width: 1600px) {
  .acct__body { width: 100%; }
}
@media (max-width: 1000px) {
  .acct__body { flex-direction: column; }
  .anav { width: 100%; flex: 0 0 auto; }
  .anav__rule { width: 100%; }
  .apanel__fields { flex-direction: column; }
  .apanel__terms { flex-wrap: wrap; gap: 24px 40px; }
}

/* the labelled input pair used by the small edit modals */
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld__k { font: 500 12px/128% Inter, sans-serif; color: #656772;
          text-transform: uppercase; letter-spacing: .03em; }

/* Register 5 Done — the verified note the register flow hands to My Account.
   Title Inter Semi Bold 14 #101828 over Medium 12 #364153. 17553:13262 */
.averified { display: flex; align-items: flex-start; gap: 12px; padding: 14px;
             border-radius: 8px; background: rgba(0, 128, 95, .07);
             box-shadow: inset 0 0 0 1px rgba(0, 128, 95, .2); }
.averified > svg { flex: 0 0 18px; fill: #00805f; margin-top: 1px; }
.averified__t { display: flex; flex-direction: column; gap: 4px; }
.averified__t strong { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.averified__t span   { font: 500 12px/1.28 Inter, sans-serif; color: #364153; }