/* ===== profile.html inline style 1 ===== */
:root{
      --black:#111827; --muted:#6b7280; --line:#e5e7eb; --gold:#C89B3C;
      --bg:#fff;
      --z-nav:1000; --z-overlay:20098; --z-drawer:20099; --z-dropdown:20120; --z-modal:20110;
    }
    body{ background:var(--bg); color:var(--black); -webkit-font-smoothing:antialiased; }
    .container-xl{ max-width:1200px; margin:0 auto; padding:1rem; }
    .muted{ color:var(--muted) }
    .btn{ border:1px solid var(--line); padding:.6rem .9rem; border-radius:.8rem; background:#fff; color:#111827; transition:all .15s; }
    .btn:hover{ background:#f9fafb }
    .btn-primary{ background:#111827; color:#fff; border-color:#111827 }
    .btn-ghost{ background:transparent }
    .btn-danger{ border-color:#fecaca; color:#991b1b; }
    .btn-danger:hover{ background:#fef2f2 }
    .field{ display:flex; flex-direction:column; gap:.35rem }
    .field input,.field textarea,.field select{ border:1px solid var(--line); border-radius:.7rem; padding:.7rem .8rem }
    .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:#d1d5db; box-shadow:0 0 0 3px rgba(17,24,39,.08) }
    .avatar{ width:90px; height:90px; border-radius:9999px; object-fit:cover; border:1px solid var(--line); background:#fff }

    /* Simple section headings */
    .sec-head{ font-weight:900; font-size:1.05rem; margin:1rem 0 .5rem; }
    .muted-small{ font-size:.9rem; color:#6b7280 }

    /* Loader */
    #loader{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:60; background:rgba(255,255,255,.55); backdrop-filter:blur(3px) }
    #loader.active{ display:flex }
    .spinner{ width:56px; height:56px; border-radius:9999px; border:6px solid rgba(0,0,0,.06); border-top-color:var(--gold); animation:spin 900ms linear infinite }
    @keyframes spin{ to{ transform:rotate(360deg) } }

    /* Toast/banner */
    .banner{ display:none; padding:.75rem 1rem; border-radius:.65rem; border:1px solid #a7f3d0; background:#ecfdf5; color:#065f46 }
    .banner.err{ border-color:#fecaca; background:#fef2f2; color:#991b1b }
    .banner.show{ display:block }

    /* Modal (centered) */
    .modal-overlay{
      position:fixed; inset:0; display:none; z-index:var(--z-modal);
      background:rgba(2,6,23,.46); backdrop-filter:saturate(120%) blur(4px);
      padding:1rem;
    }
    .modal-overlay.show{ display:grid; place-items:center; }
    .modal{
      width:min(92vw,520px); background:#fff; border:1px solid #eef2f7; border-radius:1rem; padding:1rem;
      box-shadow:0 24px 64px rgba(2,6,23,.18);
      transform:translateY(10px) scale(.98); opacity:0; transition:transform .22s ease, opacity .2s ease;
      margin-inline:auto;
    }
    .modal-overlay.show .modal{ transform:translateY(0) scale(1); opacity:1; }
    .modal-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
    .modal-title{ font-weight:800; font-size:1.05rem; }
    .modal-body{ color:#374151; margin-top:.35rem; }
    .modal-actions{ margin-top:.9rem; display:flex; justify-content:flex-end; gap:.5rem; }

    /* Sticky nav / stacking */
    #site-nav{
      position:sticky; top:0; z-index:var(--z-nav);
      background:rgba(255,255,255,.82); border-bottom:1px solid #eee;
      overflow:visible !important;
    }
    #drawer{ z-index:var(--z-drawer) !important }
    #drawerOverlay{ z-index:var(--z-overlay) !important }
    .dropdown, .menu, .popover, .account-menu, [role="menu"], [data-dropdown]{ position:relative; z-index:var(--z-dropdown) !important }

    /* Tabs */
    .tabs{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.25rem 0 1rem; }
    .tab{ border:1px solid var(--line); border-radius:9999px; padding:.4rem .8rem; font-size:.9rem }
    .tab.active{ border-color:var(--gold); background:#fff6e5; color:#a16207; font-weight:700 }

    .empty{
      border:1px dashed var(--line); border-radius:1rem; padding:1rem;
      text-align:center; color:#6b7280;
    }

    /* ===== Responsive tables ===== */
    .table-wrap{ width:100%; overflow:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:0.75rem; background:#fff; }
    table.t{ width:100%; border-collapse:separate; border-spacing:0; min-width:560px; }
    .t thead th{
      position:sticky; top:0; background:#fff; z-index:1; text-align:inherit;
      font-weight:800; font-size:.9rem; color:#111827; border-bottom:1px solid var(--line);
      padding:.85rem .9rem;
    }
    .t tbody td{
      padding:.7rem .9rem; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle;
    }

    /* Orders table specifics */
    .status-badge{
      display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border-radius:9999px; font-size:.82rem; border:1px solid var(--line);
      background:#fff;
    }
    .status-pending{ background:#fff8e1; border-color:#f3e8c4; }
    .status-completed{ background:#ecfdf5; border-color:#bbf7d0; }
    .status-cancelled{ background:#fee2e2; border-color:#fecaca; }
    @media (max-width: 480px){
      .col-items, .col-actions { display:none; }
      .t thead th, .t tbody td { font-size:.88rem; }
    }

    /* ===== Mobile card layout (phones) ===== */
    @media (max-width: 640px){
      .table-wrap{ border:0; background:transparent; padding:0; }
      table.t{ min-width:0; }
      .t thead{ display:none; }
      .t tbody{ display:grid; gap:.75rem; }
      .t tbody tr{
        display:block;
        border:1px solid var(--line);
        border-radius:.9rem;
        background:#fff;
        padding:.9rem;
        box-shadow:0 1px 0 rgba(17,24,39,.03);
      }
      .t tbody td{ display:block; border-bottom:0; padding:.25rem 0; }
      .t tbody tr td:first-child strong{ display:block; font-size:.92rem; margin-bottom:.25rem; }
      .t tbody tr td:first-child:empty{ display:none; }
      .t tbody td .btn{ width:100%; }

      #ordersTable .col-items, #ordersTable .col-actions{ display:block !important; }
      #ordersTable tbody{ display:grid; gap:.75rem; }
      #ordersTable tbody tr{
        display:grid;
        grid-template-columns: 1fr auto;
        grid-auto-rows: auto;
        align-items:center;
        row-gap:.25rem;
      }
      #ordersTable tbody tr td{ padding:.2rem 0; }
      #ordersTable td.col-id{ grid-column:1; grid-row:1; font-weight:800; font-size:1rem; }
      #ordersTable td.col-status{ grid-column:2; grid-row:1; justify-self:end; }
      #ordersTable td.col-date{ grid-column:1; grid-row:2; color:var(--muted); }
      #ordersTable td.col-total{ grid-column:2; grid-row:2; justify-self:end; font-weight:700; }
      #ordersTable td.col-items{ grid-column:1; grid-row:3; color:var(--muted); }
      #ordersTable td.col-actions{ grid-column:1 / -1; grid-row:4; margin-top:.35rem; }
      #ordersTable td.col-actions .btn{ width:100%; }
    }

    /* ===== Addresses UI ===== */
    .addr-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
    @media(max-width:860px){ .addr-list{ grid-template-columns:1fr; } }
    .addr-card{
      border:1px solid var(--line); border-radius:.9rem; padding:.9rem; background:#fff;
      display:flex; gap:.6rem; align-items:flex-start;
    }
    .addr-dot{ width:10px; height:10px; border-radius:9999px; background:#e5e7eb; margin-top:.3rem; flex-shrink:0; }
    .addr-card.default-ship .addr-dot{ background:#3b82f6; }
    .addr-card.default-bill .addr-dot{ background:#10b981; }
    .addr-badges{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.25rem; }
    .addr-badge{ font-size:.75rem; padding:.12rem .45rem; border-radius:9999px; border:1px solid var(--line); background:#f9fafb; color:#374151; }
    .addr-actions{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.5rem; }
    .addr-actions .btn{ padding:.45rem .6rem; border-radius:.6rem; font-size:.85rem; }
    .addr-form{ border:1px solid var(--line); border-radius:.9rem; padding:1rem; background:#fff; }
    .addr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
    @media(max-width:680px){ .addr-grid{ grid-template-columns:1fr; } }