/* Customer accounts: header entry, mobile menu card, sign in dialog.
   Load AFTER style.css. Desktop = button in header + centered split dialog.
   Mobile = card at top of the menu + bottom sheet. */

/* ---------- Desktop header button (1180px and up) ---------- */
.acct{position:relative;display:none}
.acct-btn{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 8px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--brand-dark);font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{background:var(--brand-light);border-color:var(--line3)}
.acct-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--brand-light);color:var(--brand-dark)}
.acct.in .acct-ico{background:none}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font:600 .85rem/1 var(--font)}
.acct.in .acct-label::after-unused{content:"";display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);margin-left:10px}
.acct-label{max-width:120px;overflow:hidden;text-overflow:ellipsis}

.acct-menu{position:absolute;right:0;top:calc(100% + 10px);width:260px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 14px 34px rgba(60,61,49,.16);padding:8px;z-index:30}
.acct-menu[hidden]{display:none}
.am-head{display:grid;padding:10px 12px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.am-head strong{color:var(--brand-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-head small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-menu a,.acct-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;border-radius:9px;font-size:.93rem;color:var(--text);cursor:pointer}
.acct-menu a:hover,.acct-menu button:hover{background:var(--brand-light);color:var(--brand-dark)}

@media(min-width:1180px){
  .header .container.nav{
    grid-template-columns:auto minmax(260px,1fr) auto auto auto;
    grid-template-areas:"logo search wish account cart" "links links links links links";
    column-gap:18px;
  }
  .header .acct{display:block;grid-area:account;align-self:center}
}

/* ---------- Phone and tablet: account card at the top of the menu ---------- */
.m-acct{display:none}
@media(max-width:1179px){
  .m-acct{display:block;background:var(--brand-light);border:1px solid var(--border);border-radius:16px;padding:14px;margin-bottom:10px}
  .ma-t{margin:0;font-weight:600;color:var(--brand-dark)}
  .ma-s{margin:2px 0 12px;color:var(--muted);font-size:.86rem;line-height:1.45}
  .ma-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ma-btns .btn{padding:11px 8px;font-size:.9rem;text-align:center}
  .ma-user{display:flex;align-items:center;gap:12px}
  .ma-user .avatar{width:42px;height:42px;font-size:1.05rem;flex:none}
  .ma-user div{min-width:0;display:grid;flex:1}
  .ma-user strong{color:var(--brand-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ma-user small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ma-user .btn{padding:8px 14px;font-size:.85rem;flex:none}
  .menu-btn{position:relative}
  .menu-btn.has-user::after{content:"";position:absolute;top:4px;right:4px;width:10px;height:10px;border-radius:50%;background:#2e9d5b;border:2px solid #fff}
}

/* Checkout hint (guests only) */
.co-hint{background:var(--brand-light);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.co-hint .link-btn{font-weight:600}

/* ---------- Dialog (desktop): centered, split card ---------- */
html.auth-open{overflow:hidden}
.auth{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.auth[hidden]{display:none!important}
.auth-back{position:absolute;inset:0;background:rgba(40,41,32,.5);backdrop-filter:blur(3px);animation:authFade .2s}
.auth-card{position:relative;display:grid;grid-template-columns:5fr 6fr;width:min(860px,100%);max-height:min(660px,92vh);background:var(--surface);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(40,41,32,.35);animation:authPop .25s ease-out}

.auth-side{position:relative;overflow:hidden;background:#3c3d31;color:#f4ece3;padding:40px 34px 0;display:flex;flex-direction:column;gap:18px}
.auth-brand{font:600 1.15rem var(--font);color:#e9dfd2}
.auth-side h2{color:#fff;font-size:1.9rem;margin:6px 0 0}
.auth-side ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.92rem;color:#f4ece3}
.auth-side li{display:flex;gap:10px}
.auth-side li::before{content:"✓";color:#cfc5b3;flex:none}
.auth-arch{margin-top:auto;align-self:center;width:64%;height:150px;border:1.5px solid rgba(254,247,242,.35);border-bottom:0;border-radius:200px 200px 0 0;display:grid;place-items:center;font-size:2rem;color:rgba(254,247,242,.55)}

.auth-main{position:relative;padding:40px 44px 34px;overflow-y:auto;min-width:0}
.auth-grab,.auth-x{position:absolute}
.auth-grab{display:none}
.auth-x{top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--brand-dark);cursor:pointer;z-index:2;font-size:.9rem}
.auth-x:hover{background:var(--brand-light)}

/* Tabs: underlined on desktop */
.auth-tabs{display:flex;gap:24px;border-bottom:1px solid var(--border);margin:0 40px 24px 0}
.auth-tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:0 0 12px;font-weight:600;color:var(--muted);cursor:pointer}
.auth-tabs button[aria-selected="true"]{color:var(--brand-dark);border-bottom-color:var(--brand)}
.auth-card:not([data-mode="in"]):not([data-mode="up"]) .auth-tabs{display:none}

/* Views */
.auth-card [data-v]{display:none}
.auth-card[data-mode="in"] [data-v~="in"],
.auth-card[data-mode="up"] [data-v~="up"],
.auth-card[data-mode="forgot"] [data-v~="forgot"],
.auth-card[data-mode="reset"] [data-v~="reset"],
.auth-card[data-mode="sent"] [data-v~="sent"]{display:grid;gap:14px;align-content:start}
.auth-card[data-mode="forgot"] .auth-main,.auth-card[data-mode="reset"] .auth-main,.auth-card[data-mode="sent"] .auth-main{padding-top:56px}
.auth-main h2{font-size:1.7rem;margin:0}
.auth-main .sub{margin:-6px 0 4px;color:var(--muted);font-size:.92rem}

.fld{display:grid;gap:6px;font-size:.84rem;font-weight:600;color:var(--muted)}
.fld small{font-weight:400;font-size:.78rem}
.fld input{width:100%;min-height:48px;border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.95rem;font-weight:400;color:var(--text);background:var(--surface)}
.fld input:hover{border-color:var(--line3)}
.fld input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(60,61,49,.15)}
.pw{position:relative;display:block}
.pw input{padding-right:70px}
.peek{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--brand-dark);font-weight:600;font-size:.82rem;padding:8px 10px;border-radius:8px;cursor:pointer}
.peek:hover{background:var(--brand-light)}
.auth-main .btn{width:100%;text-align:center;min-height:48px;padding:12px 22px}
.auth-main .forgot{justify-self:start;font-weight:600}
.auth-msg{margin:14px 0 0;font-size:.88rem;color:#a3263e;line-height:1.45}
.auth-msg:empty{display:none}
.auth-msg.ok{color:#21683a}

@keyframes authFade{from{opacity:0}}
@keyframes authPop{from{opacity:0;transform:translateY(12px) scale(.98)}}
@keyframes authSheet{from{transform:translateY(100%)}}

/* Tablet: single column dialog, no side panel */
@media(max-width:820px){
  .auth-card{grid-template-columns:1fr;width:min(460px,100%)}
  .auth-side{display:none}
  .auth-main{padding:34px 30px 30px}
}

/* ---------- Phone: bottom sheet with a segmented switch ---------- */
@media(max-width:700px){
  .auth{place-items:end center;padding:0}
  .auth-card{width:100%;max-height:92vh;border-radius:24px 24px 0 0;animation:authSheet .3s cubic-bezier(.2,.8,.2,1)}
  .auth-main{padding:0 20px calc(26px + env(safe-area-inset-bottom,0px))}
  .auth-grab{display:block;position:sticky;top:0;z-index:1;height:30px;margin:0 -20px 4px;background:var(--surface);touch-action:none;cursor:grab}
  .auth-grab span{position:absolute;left:50%;top:10px;width:42px;height:5px;border-radius:99px;background:var(--line2);transform:translateX(-50%)}
  .auth-x{top:6px;right:12px;width:34px;height:34px}
  .auth-tabs{gap:4px;padding:4px;margin:6px 0 20px;background:var(--brand-light);border:1px solid var(--border);border-radius:14px}
  .auth-tabs button{flex:1;margin:0;padding:11px 8px;border:0;border-radius:10px}
  .auth-tabs button[aria-selected="true"]{background:var(--surface);box-shadow:0 2px 8px rgba(60,61,49,.12)}
  .auth-main h2{font-size:1.45rem}
  .fld input{font-size:16px;min-height:52px}
  .auth-card[data-mode="forgot"] .auth-main,.auth-card[data-mode="reset"] .auth-main,.auth-card[data-mode="sent"] .auth-main{padding-top:0}
  .auth-card[data-mode="forgot"] h2,.auth-card[data-mode="reset"] h2,.auth-card[data-mode="sent"] h2{margin-top:10px}
}

/* Checkout steps (cart drawer) */
.co-steps{list-style:none;counter-reset:cs;display:grid;grid-template-columns:repeat(3,1fr);margin:4px 0 0;padding:0}
.co-steps li{counter-increment:cs;position:relative;display:grid;justify-items:center;gap:6px;text-align:center;font-size:.78rem;font-weight:600;color:var(--muted)}
.co-steps li::before{content:counter(cs);position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px solid var(--line2);color:var(--muted)}
.co-steps li:not(:last-child)::after{content:"";position:absolute;top:13px;left:calc(50% + 19px);right:calc(-50% + 19px);height:2px;background:var(--line2)}
.co-steps li.done,.co-steps li.now{color:var(--brand-dark)}
.co-steps li.done::before{content:"✓";background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.co-steps li.done::after{background:var(--brand)}
.co-steps li.now::before{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.co-steps-note{margin:0;text-align:center}

/* ---------- Brand mark (girl logo) next to the Skin Essentials name ---------- */
.logo{display:inline-flex;align-items:center;gap:9px}
.logo-mark{display:block;width:auto;flex:none;height:44px}
.header .logo:before{display:none!important;content:none!important}   /* replaces the old flower badge */
@media(max-width:1179px){.header .logo .logo-mark{height:38px}}
@media(max-width:600px){.header .logo .logo-mark{height:30px}}
@media(max-width:380px){.header .logo .logo-mark{height:25px}}
.auth-brand{display:flex;align-items:center;gap:10px}
.auth-brand .logo-mark{height:44px;filter:brightness(0) invert(1)}

/* ---------- PC header: logo left, search exactly in the middle, buttons right, menu links centred below ---------- */
@media(min-width:1180px){
  .header .container.nav{
    grid-template-columns:minmax(0,1fr) minmax(280px,400px) minmax(0,1fr);
    grid-template-areas:"logo search actions" "links links links";
    column-gap:20px;align-items:center;
  }
  .header .logo{grid-area:logo;justify-self:start}
  .header .search{grid-area:search;width:100%;max-width:none;margin:0;justify-self:center}
  .header #siteSearch{min-height:46px}
  .header .nav-actions{grid-area:actions;display:flex;justify-content:flex-end;align-items:center;gap:10px}
  .header .nav-actions .wish-link,.header .nav-actions .cart-button{width:auto;height:46px;min-height:46px;align-self:center;margin:0}
  .header .nav-actions .wish-link{width:46px}
  .header .nav-actions .cart-button{padding:0 18px}
  .header .nav-actions .acct{grid-area:auto;display:block;align-self:center}
  .header .nav-actions .acct-btn{height:46px;min-height:46px}
  .header .nav-links{grid-area:links;justify-content:center;margin:0}
}

/* Tablet: keep search, wishlist and cart together on the right, next to the menu button */
@media(min-width:701px) and (max-width:1179px){.header .search-toggle{margin-left:auto}.header .menu-btn{margin-left:0}}

/* Signed in: the button shows just the avatar and an arrow. Name and email appear when you click it. */
.acct.in .acct-label{display:none}
.acct.in .acct-btn{gap:8px;padding:0 12px 0 8px}
.acct.in .acct-btn::after{content:"";flex:none;width:6px;height:6px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.acct.in .acct-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-2px)}
.am-head strong,.am-head small{display:block}