/* ============================================================
   VELLINORE — Konto (account) system: header menu, auth modal,
   account dashboard. Warm quiet-luxury, matches site tokens.
   ============================================================ */

/* ---------- header Konto dropdown ---------- */
.konto-wrap{ position:relative; display:inline-flex; }
.konto-menu{
  position:absolute; top:calc(100% + 16px); right:0; z-index:60; width:264px;
  background:var(--cream, #FAF6EE); border:1px solid var(--line, #E6DECF);
  box-shadow:0 24px 60px -28px rgba(40,32,20,.5); padding:20px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.konto-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.km-out, .km-in{ display:flex; flex-direction:column; }
/* default = signed out shown, signed in hidden; body[data-auth=in] flips */
.km-in{ display:none; }
body[data-auth="in"] .km-out{ display:none; }
body[data-auth="in"] .km-in{ display:flex; }

.km-primary{
  width:100%; background:var(--espresso, #463E31); color:var(--cream, #FAF6EE); border:0;
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 18px; cursor:pointer; transition:background .2s var(--ease);
}
.km-primary:hover{ background:var(--ink, #2A251C); }
.km-reg{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft, #6B6253); margin:13px 0 0; line-height:1.5; }
.km-link{ background:none; border:0; padding:0; cursor:pointer; color:var(--gold-deep, #8C6E3A);
  font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; border-bottom:1px solid currentColor; }
.km-link:hover{ color:var(--ink, #2A251C); }
.km-link.km-mute{ color:var(--ink-faint, #9A9race); color:var(--ink-soft, #6B6253); }
.km-sep{ height:1px; background:var(--line, #E6DECF); margin:16px 0; }
.km-ghost{
  width:100%; background:none; border:1px solid var(--line-dark, #CDBFA6); color:var(--ink, #2A251C);
  font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:12px 18px; cursor:pointer; transition:border-color .2s var(--ease), background .2s var(--ease);
}
.km-ghost:hover{ border-color:var(--ink, #2A251C); background:rgba(140,110,58,.06); }
.km-greet{ display:flex; flex-direction:column; gap:3px; }
.km-hi{ font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep, #8C6E3A); }
.km-name{ font-family:var(--serif); font-size:21px; color:var(--ink, #2A251C); }
.km-item{ font-family:var(--sans); font-size:13.5px; color:var(--ink, #2A251C); padding:9px 0; text-decoration:none;
  display:flex; justify-content:space-between; transition:color .18s var(--ease); }
.km-item:hover{ color:var(--gold-deep, #8C6E3A); }

/* signed-in label shows the name in the header button */
.konto-label{ display:inline; }

/* ---------- auth modal ---------- */
.auth-modal{
  position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  padding:24px; background:rgba(34,28,18,.5); backdrop-filter:blur(3px);
}
.auth-modal.open{ display:flex; }
.auth-card{
  position:relative; width:min(440px,100%); max-height:92vh; overflow:auto;
  background:var(--cream, #FAF6EE); border:1px solid var(--line, #E6DECF);
  box-shadow:0 40px 100px -40px rgba(40,32,20,.6); padding:40px 38px 34px;
  animation:authIn .35s var(--ease) both;
}
@keyframes authIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:none; } }
.auth-card .modal-close{ position:absolute; top:16px; right:16px; background:none; border:0; font-size:18px;
  color:var(--ink-soft, #6B6253); cursor:pointer; line-height:1; }
.auth-card .label{ font-family:var(--sans); font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-deep, #8C6E3A); }
.auth-tabs{ display:flex; gap:26px; margin:14px 0 26px; border-bottom:1px solid var(--line, #E6DECF); }
.auth-tab{ background:none; border:0; padding:0 0 13px; margin-bottom:-1px; cursor:pointer;
  font-family:var(--sans); font-size:13px; letter-spacing:.04em; color:var(--ink-faint, #9C9race);
  color:var(--ink-soft, #6B6253); border-bottom:1.5px solid transparent; transition:color .2s, border-color .2s; }
.auth-tab.on{ color:var(--ink, #2A251C); border-color:var(--gold, #B0894C); }
.auth-title{ font-family:var(--serif); font-weight:500; font-size:28px; color:var(--ink, #2A251C); margin:0 0 22px; }
.af-row{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.af-row span{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft, #6B6253); }
.af-row input{ font-family:var(--sans); font-size:14px; color:var(--ink, #2A251C); background:#fff;
  border:1px solid var(--line-dark, #CDBFA6); padding:13px 15px; outline:none; transition:border-color .2s; }
.af-row input:focus{ border-color:var(--gold, #B0894C); }
.af-meta{ display:flex; justify-content:space-between; align-items:center; margin:4px 0 22px; }
.af-check{ display:flex; align-items:center; gap:9px; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft, #6B6253); cursor:pointer; }
.af-check input{ width:15px; height:15px; accent-color:var(--gold-deep, #8C6E3A); }
.af-consent{ margin:2px 0 22px; align-items:flex-start; }
.af-consent a{ color:var(--gold-deep, #8C6E3A); }
.btn-block{ width:100%; }
.af-alt{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft, #6B6253); text-align:center; margin:18px 0 0; }
.auth-guest{ margin-top:4px; }

/* ---------- account page: gate ---------- */
.page-konto{ background:var(--cream, #FAF6EE); }
.konto-gate{ display:none; padding:clamp(70px,12vh,150px) 0 clamp(80px,14vh,170px); text-align:center; }
body[data-auth="out"] .konto-gate{ display:block; }
.konto-gate .eyebrow{ display:block; margin-bottom:14px; }
.konto-gate h1{ font-family:var(--serif); font-weight:500; font-size:clamp(38px,5vw,62px); color:var(--ink, #2A251C); margin:0; }
.kg-sub{ font-family:var(--sans); font-size:15px; line-height:1.7; color:var(--ink-soft, #6B6253); max-width:46ch; margin:18px auto 34px; }
.kg-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.kg-guest{ display:inline-block; margin-top:24px; font-size:13px; }

/* ---------- account page: dashboard ---------- */
.konto-dash{ display:none; padding:clamp(40px,7vh,86px) 0 clamp(70px,12vh,150px); }
body[data-auth="in"] .konto-dash{ display:block; }
.kd-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  border-bottom:1px solid var(--line, #E6DECF); padding-bottom:30px; margin-bottom:36px; }
.kd-head .eyebrow{ display:block; margin-bottom:10px; }
.kd-head h1{ font-family:var(--serif); font-weight:500; font-size:clamp(30px,4vw,48px); color:var(--ink, #2A251C); margin:0; }
.kd-mail{ font-family:var(--sans); font-size:13px; color:var(--ink-soft, #6B6253); margin:8px 0 0; }
.kd-out{ flex:0 0 auto; }

.kd-layout{ display:grid; grid-template-columns:230px 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.kd-nav{ display:flex; flex-direction:column; gap:2px; position:sticky; top:96px; }
.kd-tab{ text-align:left; background:none; border:0; cursor:pointer; padding:12px 16px;
  font-family:var(--sans); font-size:13.5px; letter-spacing:.02em; color:var(--ink-soft, #6B6253);
  border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s; }
.kd-tab:hover{ color:var(--ink, #2A251C); }
.kd-tab.active{ color:var(--ink, #2A251C); border-left-color:var(--gold, #B0894C); background:rgba(140,110,58,.05); }

.kd-panel{ display:none; animation:kdFade .35s var(--ease) both; }
.kd-panel.active{ display:block; }
@keyframes kdFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.kd-body h3{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--ink, #2A251C); margin:0 0 22px; }

/* overview cards */
.kd-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:42px; }
.kd-card{ border:1px solid var(--line, #E6DECF); background:#fff; padding:22px 22px 20px; display:flex; flex-direction:column; gap:7px; }
.kc-k{ font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep, #8C6E3A); }
.kc-v{ font-family:var(--serif); font-size:38px; line-height:1; color:var(--ink, #2A251C); }
.kc-v.kc-badge{ font-size:18px; }
.kc-note{ font-family:var(--sans); font-size:11.5px; color:var(--ink-faint, #9race); color:var(--ink-soft, #6B6253); }
.kd-card .km-link{ margin-top:4px; align-self:flex-start; }
.kd-block h3{ font-size:20px; }

/* recent + orders */
.kd-recent, .kd-orders{ display:flex; flex-direction:column; }
.kd-order{ display:grid; grid-template-columns:64px 1fr auto; gap:18px; align-items:center;
  border:1px solid var(--line, #E6DECF); background:#fff; padding:16px; margin-bottom:14px; }
.ko-thumb{ width:64px; height:80px; object-fit:cover; background:var(--cream-3, #EFE7D8); }
.ko-info{ display:flex; flex-direction:column; gap:4px; }
.ko-id{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft, #6B6253); }
.ko-items{ font-family:var(--serif); font-size:17px; color:var(--ink, #2A251C); }
.ko-date{ font-family:var(--sans); font-size:12px; color:var(--ink-faint, #9race); color:var(--ink-soft, #6B6253); }
.ko-right{ text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.ko-status{ font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:2px; }
.ko-status.delivered{ background:rgba(31,138,91,.12); color:#1F8A5B; }
.ko-status.transit{ background:rgba(176,137,76,.16); color:var(--gold-deep, #8C6E3A); }
.ko-status.cancelled{ background:rgba(42,37,28,.08); color:var(--ink-soft, #6B6253); }
.ko-total{ font-family:var(--serif); font-size:18px; color:var(--ink, #2A251C); }
.ko-link{ font-family:var(--sans); font-size:12px; }

/* wishlist grid reuses .pcard; empty state */
.kd-wishlist{ margin-top:4px; }
.kd-empty{ font-family:var(--sans); font-size:14px; color:var(--ink-soft, #6B6253); }

/* addresses */
.kd-addr-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.kd-addr{ border:1px solid var(--line, #E6DECF); background:#fff; padding:22px; display:flex; flex-direction:column; gap:10px; }
.ka-tag{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep, #8C6E3A); }
.kd-addr p{ font-family:var(--sans); font-size:14px; line-height:1.65; color:var(--ink, #2A251C); margin:0; }
.ka-act{ display:flex; gap:18px; margin-top:auto; }
.kd-addr-new{ cursor:pointer; align-items:center; justify-content:center; flex-direction:row; gap:10px; text-align:center;
  border-style:dashed; color:var(--ink-soft, #6B6253); font-family:var(--sans); font-size:13.5px; background:transparent; }
.kd-addr-new:hover{ border-color:var(--gold, #B0894C); color:var(--ink, #2A251C); }
.ka-plus{ font-size:20px; line-height:1; color:var(--gold-deep, #8C6E3A); }

/* payment */
.kd-pay-list{ display:flex; flex-direction:column; gap:12px; }
.kd-pay{ display:grid; grid-template-columns:88px 1fr auto auto; gap:18px; align-items:center;
  border:1px solid var(--line, #E6DECF); background:#fff; padding:16px 20px; }
.kp-mark{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink, #2A251C);
  border:1px solid var(--line-dark, #CDBFA6); padding:6px 0; text-align:center; }
.kp-no{ font-family:var(--sans); font-size:14px; color:var(--ink, #2A251C); letter-spacing:.04em; }
.kp-exp{ font-family:var(--sans); font-size:12px; color:var(--ink-soft, #6B6253); }
.kd-pay-new{ cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; border-style:dashed;
  color:var(--ink-soft, #6B6253); font-family:var(--sans); font-size:13.5px; background:transparent; padding:18px; }
.kd-pay-new:hover{ border-color:var(--gold, #B0894C); color:var(--ink, #2A251C); }

/* settings */
.kd-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:620px; }
.kf-row{ display:flex; flex-direction:column; gap:7px; }
.kf-row span{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft, #6B6253); }
.kf-row input{ font-family:var(--sans); font-size:14px; color:var(--ink, #2A251C); background:#fff;
  border:1px solid var(--line-dark, #CDBFA6); padding:12px 14px; outline:none; transition:border-color .2s; }
.kf-row input:focus{ border-color:var(--gold, #B0894C); }
.kd-prefs{ display:flex; flex-direction:column; gap:14px; margin:30px 0; }
.kf-check{ display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:13.5px; color:var(--ink, #2A251C); cursor:pointer; }
.kf-check input{ width:16px; height:16px; accent-color:var(--gold-deep, #8C6E3A); }
.kd-save-row{ display:flex; align-items:center; gap:24px; padding-top:8px; border-top:1px solid var(--line, #E6DECF); }

/* ---------- responsive ---------- */
@media (max-width:860px){
  .kd-layout{ grid-template-columns:1fr; gap:26px; }
  .kd-nav{ position:static; flex-direction:row; flex-wrap:wrap; gap:6px; border-bottom:1px solid var(--line, #E6DECF); padding-bottom:14px; }
  .kd-tab{ border-left:0; border-bottom:2px solid transparent; padding:9px 13px; }
  .kd-tab.active{ border-left:0; border-bottom-color:var(--gold, #B0894C); }
  .kd-cards{ grid-template-columns:1fr; }
  .kd-form{ grid-template-columns:1fr; }
  .kd-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}
@media (max-width:560px){
  .konto-menu{ position:fixed; top:auto; bottom:0; right:0; left:0; width:auto; border-bottom:0; }
  .kd-order{ grid-template-columns:54px 1fr; }
  .ko-right{ grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between; margin-top:6px; }
  .kd-pay{ grid-template-columns:1fr auto; row-gap:6px; }
  .kp-exp{ grid-column:1 / -1; }
}