/* Mobile-first beautiful My Account styles for WooCommerce */

.kr-myaccount-wrap{max-width:900px;margin:12px auto;padding:12px;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.kr-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:linear-gradient(135deg,#FFEDD5,#FFF7ED);border-radius:14px;box-shadow:0 6px 18px rgba(22,22,26,0.06);}
.kr-title h2{margin:0;font-size:18px;line-height:1.1;color:#111;font-weight:700;}
.kr-sub{margin:4px 0 0;font-size:13px;color:#6b6b76;}
.kr-edit-btn{background:#111;color:#fff;border:none;padding:8px 12px;border-radius:12px;font-weight:600;cursor:pointer;box-shadow:0 6px 12px rgba(17,17,17,0.12);}

.kr-cards{margin-top:14px;display:grid;grid-template-columns:1fr;gap:12px;}
.kr-card{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border-radius:12px;text-decoration:none;color:inherit;box-shadow:0 8px 30px rgba(9,10,12,0.04);transition:transform .12s ease, box-shadow .12s ease;border:1px solid rgba(17,17,17,0.03);}
.kr-card:active, .kr-card:focus, .kr-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(9,10,12,0.06);}
.kr-card-left{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,#FFF7ED,#FFEDD5);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kr-icon{width:28px;height:28px;fill:none;stroke:#111;stroke-width:1.5;opacity:0.9}
.kr-card-title{font-weight:700;font-size:15px;margin-bottom:4px;}
.kr-card-sub{font-size:13px;color:#6b6b76;}

.kr-bottom-info{margin-top:16px;padding:12px;background:linear-gradient(180deg,#F7FDF9,#F0FFF4);border-radius:12px;}
.kr-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(17,17,17,0.04);}
.kr-row:last-child{border-bottom:0;}
.kr-link{background:transparent;border:none;color:#0B75FF;font-weight:600;text-decoration:none;}

.small{font-size:13px;color:#6b6b76;margin:4px 0 0;}

/* Desktop tweaks — keep mobile-first but allow 2-column cards on wider screens */
@media(min-width:720px){
    .kr-cards{grid-template-columns:repeat(2,1fr);}
    .kr-myaccount-wrap{padding:18px;}
}

/* Accessibility focus */
.kr-card:focus{outline:3px solid rgba(11,117,255,0.12);outline-offset:3px;}