/* =========================================================
   My account: the tile hub
   Loaded on the account page only (inc/enqueue.php).
   Logged in: overview tiles, then My orders, Delivery addresses and My details.
   Logged out: Log in beside "New to The Kiddie Depot?".
   ========================================================= */

/* Column widths: 1040 logged in, 920 on the log in page. The breadcrumb and H1 share the column. */
.ac-in .wrap{max-width:calc(1040px + 2 * var(--pad,24px))}
.ac-login .wrap{max-width:calc(920px + 2 * var(--pad,24px))}
.ac-in .ac-content{max-width:none;margin:0 0 var(--sp)}

/* Fill colour of the 3 sections (inc/woocommerce-account.php): sage on all of them */
.fill-sage{background:var(--sage);--tcs:var(--sage-shadow)}

/* ---------- overview ---------- */
.ac-hello{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin:24px 0 28px}
.ac-hello h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.ac-content .ac-hello p{margin-top:8px;color:var(--ink-soft);font-size:var(--fs-h1-sub)}
.ac-content a.ac-out{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.ac-content a.ac-out:hover{color:var(--ink)}
.ac-welcome{margin-bottom:32px}

.ac-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.ac-content a.ac-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-height:232px;padding:24px;border-radius:24px;color:#FFFFFF;font-weight:400;text-shadow:var(--tcs,var(--on-fill-shadow));
  box-shadow:0 2px 4px rgba(42,33,24,.1),0 12px 26px -16px rgba(42,33,24,.5);transition:transform .16s,box-shadow .16s}
.ac-content a.ac-tile:hover{color:#FFFFFF;transform:translateY(-2px);box-shadow:0 4px 8px rgba(42,33,24,.12),0 16px 30px -16px rgba(42,33,24,.55)}
.ac-content a.ac-tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.ac-tile-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:6px;background:var(--glass-frame);box-shadow:var(--glass-ring)}
.ac-tile-ic svg{width:26px;height:26px;color:#FFFFFF;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ac-tile-txt{display:flex;flex-direction:column;gap:8px}
.ac-tile-txt b{font-family:var(--fh);font-weight:700;font-size:clamp(1.25rem,1.1rem + .4vw,1.375rem);line-height:var(--lh-snug)}
.ac-tile-p{font-size:var(--fs-sm);line-height:var(--lh-body)}
.ac-tile-sub{display:none;font-size:.8125rem;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-tile-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid rgba(255,255,255,.4);font-weight:600;font-size:var(--fs-sm)}
.ac-tile-info{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-tile-ar{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.22)}
.ac-tile-ar svg{width:18px;height:18px}

/* latest order row, and the photo square used by the order cards */
.ac-latest{display:flex;align-items:center;gap:20px;margin-top:24px;padding:16px 20px}
.ac-thumb{flex:none;width:76px;height:76px;border-radius:14px;overflow:hidden;background:var(--cream-2)}
.ac-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ac-latest-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ac-latest-txt b{font-size:var(--fs-lg);line-height:var(--lh-snug)}
.ac-meta{font-size:var(--fs-sm);color:var(--ink-soft)}

/* status pill */
.ac-pill{display:inline-flex;align-items:center;flex:none;min-height:30px;padding:0 12px;border-radius:999px;font-weight:700;font-size:.8125rem;white-space:nowrap}
.ac-pill.is-go{background:var(--copper-wash);color:var(--ink)}
.ac-pill.is-wait{background:var(--sun-wash);color:var(--ink)}
.ac-pill.is-done{background:var(--cream-2);color:var(--ink-soft)}

/* WhatsApp strip */
.ac-help{display:flex;align-items:center;gap:14px;margin-top:24px;padding:12px 20px;border-radius:16px;background:var(--copper-wash)}
.ac-help-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink)}
.ac-help-ic svg{width:20px;height:20px}
.ac-help-txt{flex:1;font-size:var(--fs-sm);line-height:var(--lh-body)}
.ac-help a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}

/* buttons inside the account content keep their own colours */
.ac-content .btn-line{color:var(--ink)}
.ac-content .btn-line:hover{color:var(--copper-pressed)}
.ac-content .btn:not(.btn-line){color:var(--on-accent)}

/* ---------- account pages: back link, chips, heading ---------- */
.ac-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 16px;margin-top:16px}
.ac-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.ac-back:hover{color:var(--copper-pressed)}
.ac-back-ic{width:18px;height:18px;transform:scaleX(-1)}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px}
.ac-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--rule);font-weight:600;font-size:var(--fs-sm);color:var(--ink);transition:border-color .16s}
.ac-chip:not(.on){background:var(--surface)}
.ac-chip:not(.on):hover{border-color:var(--ink);color:var(--ink)}
.ac-chip.on{border-color:transparent;color:#FFFFFF;text-shadow:var(--tcs,var(--on-fill-shadow))}
.ac-chip.on:not([class*="fill-"]){background:var(--ink)}
.ac-chip svg{width:18px;height:18px}
.ac-chip.on svg{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ac-short{display:none}
.ac-chip:focus-visible,.ac-back:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.ac-head{display:flex;align-items:center;gap:16px;margin:24px 0}
.ac-head-ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#FFFFFF;box-shadow:0 8px 18px -10px rgba(42,33,24,.5)}
.ac-head-ic svg{width:26px;height:26px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.ac-head h1{font-size:var(--fs-h1);line-height:var(--lh-tight)}
.ac-head p{margin-top:4px;color:var(--ink-soft);font-size:var(--fs-base);line-height:var(--lh-body)}

/* cards in a grid: no stacked-card top margin from .pg-card+.pg-card */
.ac-orders .pg-card,.ac-addresses .pg-card,.ac-details .pg-card{margin-top:0}

/* an order, an address form or a plugin page: 1 card */
.ac-content.ac-card{padding:clamp(20px,2.4vw,28px)}
.ac-content.ac-card h2{margin:24px 0 8px}

/* ---------- My orders ---------- */
.ac-orders{display:grid;gap:16px}
.ac-order{display:flex;align-items:center;gap:20px;padding:20px}
.ac-order .ac-thumb{width:84px;height:84px}
.ac-order-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ac-order-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.ac-order-top b{font-size:var(--fs-lg)}
.ac-order-items{font-size:var(--fs-base)}
.ac-order-end{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.ac-total{font-size:var(--fs-lg);font-variant-numeric:tabular-nums}
.ac-order-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.ac-pages{display:flex;gap:8px;margin-top:16px}
.ac-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 24px;text-align:center}
.ac-empty b{font-family:var(--fh);font-size:var(--fs-h3)}
.ac-content .ac-empty p{color:var(--ink-soft);max-width:44ch;margin:0 0 8px}
.ac-content p.ac-foot{margin-top:20px;font-size:var(--fs-sm);color:var(--ink-soft)}

/* ---------- Delivery addresses ---------- */
.ac-addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.ac-addr{display:flex;flex-direction:column;gap:12px;padding:24px}
.ac-addr-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ac-note{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.ac-content .ac-addr p{margin:0}
.ac-content .ac-soft{font-size:var(--fs-sm);color:var(--ink-soft);margin:0}
.ac-addr-btn{margin-top:auto;padding-top:6px}

/* ---------- My details ---------- */
.ac-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:start}
.ac-form{padding:24px}
.ac-form h2{font-family:var(--fh);font-weight:700;font-size:var(--fs-h3)}
.ac-content .ac-form .btn{justify-self:start;margin-top:4px}
.ac-content .ac-form .password-input{display:block}

/* ---------- logged out: log in ---------- */
.ac-login-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-items:stretch;padding-bottom:var(--sp)}
.ac-login-card{padding:clamp(24px,3vw,32px)}
.ac-login-card h2,.ac-new h2{font-family:var(--fh);font-weight:700;font-size:var(--fs-h3);margin-bottom:16px}
.ac-login-card .pg-form{gap:16px}
.ac-pw{position:relative;display:block;margin-top:4px}
.pg-form .ac-pw input{margin-top:0;padding-right:76px}
.ac-pw-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);min-height:36px;padding:0 12px;border:0;border-radius:6px;background:var(--cream-2);font:600 var(--fs-xs) var(--ft);color:var(--ink);cursor:pointer}
.ac-pw-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ac-login-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--fs-sm)}
.ac-login-row a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.ac-login-row .check{align-items:center}
.ac-login-row .check input{margin-top:0}
.ac-new{display:flex;flex-direction:column;gap:8px;padding:clamp(24px,3vw,32px);border-radius:22px;background:var(--copper-wash);border:1px solid rgba(var(--copper-rgb),.18)}
.ac-new h2{margin-bottom:0}
.ac-new p{margin:0 0 6px;font-size:var(--fs-sm);color:var(--ink-soft);line-height:var(--lh-body)}
.ac-ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ac-ticks li{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);line-height:1.4}
.ac-ticks svg{flex:none;width:24px;height:24px;padding:5px;border-radius:50%;background:var(--surface);color:var(--ink)}
.ac-new .btn{margin-top:auto}
.ac-new .btn-line{color:var(--ink)}
.woocommerce-account .ac-login .wrap>.woocommerce>.woocommerce-notices-wrapper:not(:empty){margin:16px 0}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .ac-tiles{grid-template-columns:1fr}
  .ac-content a.ac-tile{flex-direction:row;align-items:center;gap:14px;min-height:84px;padding:14px 16px;border-radius:20px}
  .ac-tile-ic{width:48px;height:48px;border-radius:14px;margin:0}
  .ac-tile-ic svg{width:24px;height:24px}
  .ac-tile-txt{flex:1;min-width:0;gap:2px}
  .ac-tile-txt b{font-size:var(--fs-lg)}
  .ac-tile-p{display:none}
  .ac-tile-ft{margin:0;padding:0;border:0;flex:none;max-width:45%}
  .ac-login-grid{grid-template-columns:1fr}
}

/* ---------- phone ---------- */
@media (max-width:639px){
  .ac-hello{flex-direction:column;align-items:flex-start;gap:4px;margin:16px 0 20px}
  .ac-hello .ac-out{order:2}
  .ac-tile-ft{max-width:none}
  .ac-tile-info{display:none}
  .ac-tile-sub{display:block}
  .ac-latest{flex-wrap:wrap;gap:12px 14px;padding:16px}
  .ac-latest .ac-thumb{width:56px;height:56px;border-radius:12px}
  .ac-latest-txt{flex:1 1 calc(100% - 70px)}
  .ac-latest .ac-pill{margin-left:70px}
  .ac-latest .btn{width:100%}
  .ac-help{flex-wrap:wrap;gap:4px 14px;padding:12px 16px}
  .ac-help-txt{flex:1 1 calc(100% - 54px)}
  .ac-help a{margin-left:54px;min-height:36px}
  .ac-bar{flex-direction:column;align-items:stretch;gap:8px}
  .ac-back{align-self:flex-start}
  .ac-chips{flex-wrap:nowrap}
  .ac-chip{flex:1;min-width:0;padding:0 8px}
  .ac-chip svg{display:none}
  .ac-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ac-short{display:inline}
  .ac-head{margin:16px 0}
  .ac-head-ic{width:44px;height:44px;border-radius:14px}
  .ac-head-ic svg{width:22px;height:22px}
  .ac-order{flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:16px}
  .ac-order .ac-thumb{width:56px;height:56px;border-radius:12px}
  .ac-order-txt{flex:1 1 calc(100% - 70px)}
  .ac-order-end{flex:1 1 100%;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap}
  .ac-order-btns{justify-content:flex-start}
  .ac-addresses,.ac-details{grid-template-columns:1fr}
  .ac-content .ac-form .btn,.ac-addr-btn .btn{width:100%}
}
.ac-new .btn-line:hover{color:var(--copper-pressed)}
.ac-pw-btn:hover{background:var(--rule)}