h1 {
    margin: 1rem 0 2rem 0;
}

.left-panel .list-group {
    max-width: 250px;
}
.left-panel .list-group > * {
    display: inline-block;
    width: 100%;
    line-height: 2rem;
    padding: 0.6rem 1rem;
    position: relative;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
.left-panel .list-group > span {
    font-weight: bold;
    font-size: 1.4rem;
}
.left-panel .list-group > a {
    border: 1px solid #DDDDDD;
    color: #888888;
    text-decoration: none;
}
.left-panel .list-group > a:hover {
    color: #444444;
    background: #eeeeee;
    border: 1px solid #DDDDDD;
    text-shadow: 0 1px 0 #FFF;
}

/* Двоколонковий макет кабінету: меню ліворуч (перманентно), контент праворуч. */
.account-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.account-layout .left-panel {
    flex: 0 0 auto;
}
.account-layout .account-content {
    flex: 1 1 auto;
    min-width: 0; /* щоб широкі таблиці не розпирали контейнер */
}
.account-content > h1:first-child {
    margin-top: 0;
}

/* Активний пункт меню — синім за нашим брендом. */
.left-panel .list-group > a.active,
.left-panel .list-group > a.active:hover {
    color: #ffffff;
    background: var(--main-blue-color, #00bcff);
    border-color: var(--main-blue-color, #00bcff);
    text-shadow: none;
}

/* Тогл-акордеон меню кабінету: на десктопі прихований (меню завжди розгорнуте). */
.account-menu-toggle,
.account-menu-toggle-label {
    display: none;
}

@media (max-width: 768px) {
    .account-layout {
        flex-direction: column;
    }
    .account-layout .left-panel,
    .account-layout .left-panel .list-group {
        width: 100%;
        max-width: none;
    }

    /* На мобільному меню згортається в акордеон (CSS-only, без JS). За замовчуванням
       згорнуте — контент видно одразу; тап по лейблу розкриває список. */
    .account-menu-toggle-label {
        display: block;
        cursor: pointer;
        padding: 0.8rem 1rem;
        background: var(--main-blue-color, #00bcff);
        color: #fff;
        font-weight: bold;
        border-radius: 4px;
        user-select: none;
    }
    .account-menu-toggle-label::after {
        content: "\25BE"; /* ▾ */
        float: right;
        transition: transform 0.2s ease;
    }
    .account-menu-toggle:checked ~ .account-menu-toggle-label::after {
        transform: rotate(180deg);
    }
    .left-panel.account-menu .list-group {
        display: none;
        margin-top: 0.5rem;
    }
    .account-menu-toggle:checked ~ .list-group {
        display: block;
    }
}

.content {

}
.content input[type="text"],
.content input[type="password"],
.content input[type="email"],
.content input[type="tel"] {
    line-height: 2rem;
    padding: 0.4rem 1rem;
    width: 90%;
    color: #333;
}
.content td:first-child {
    text-align: right;
}
.content td.required:before {
    content: "* ";
    color: red;
}
table.list {
    border: 1px solid #DDD;
    
}
.list td {
    padding: 1rem;
    line-height: 1.6rem;
}
.list thead {
    background-color: #f6f7f9;
}




/* orders */
.order-list {
    margin-bottom: 10px;
    background-color: #f6f7f9;
    padding: 1rem;
}
.order-list .order-id {
    float: left;
    margin-bottom: 2px;
}
.order-list .order-status {
    float: right;
    text-align: right;
    margin-bottom: 2px;
}
.order-list .order-content {
    padding: 10px 0px;
    display: inline-block;
    width: 100%;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}
.order-list .order-content div {
    float: left;
    width: 33.3%;
}
.order-list .order-info {
    text-align: right;
}
.order-detail {
    background: #EFEFEF;
    font-weight: bold;
}

.account-reviews tr:not(:last-child) {
    border-bottom: 1px solid var(--light-grey-color);
}
.account-reviews .review-image {
    width:150px;
}
.account-reviews .review-body a {
    font-size: 1.6rem;
}

.account-reviews .review-answer {
    font-color: var(--middle-grey-color);
    font-style: italic;
}
.account-reviews .review-answer span:first-child {
    font-weight: bold;
}

.star-ratings-sprite, .star-ratings-over {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAyCAYAAABYiSsbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxMy0xMS0wOFQxNjowNjowNy0wNjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTMtMTEtMDhUMjI6MDY6MjEtMDY6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTMtMTEtMDhUMjI6MDY6MjEtMDY6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU3QkU2Qzc5NDBFNjExRTNCRkUzOTBCNTA2ODJEQjM3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU3QkU2QzdBNDBFNjExRTNCRkUzOTBCNTA2ODJEQjM3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTdCRTZDNzc0MEU2MTFFM0JGRTM5MEI1MDY4MkRCMzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTdCRTZDNzg0MEU2MTFFM0JGRTM5MEI1MDY4MkRCMzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4blWSSAAADhUlEQVR42tRXQU8aQRSenQWWFUUEm/RQk8abp9qYir+ARj0Jrdc24aIe/DFi0nqQu016aOXopYf24skEWy9tGuoFzAKxwMKyQL9HgW5k2V1lPXSSl3379puPN2/eTD6Eo6Mj5mQEg8EFel5fX38zxjc3N03xnDkcsizHYQmneEfEHo+Heb3eBCxOvmvEyHQej6dkPd814oSxJK4Qi6LIfD7fgAx+gmJjEyPDR3hEDaFoL2a9L4FAgIVCISYIwigMZWv8KAC/AUtZEQvo4yR2ei8SiUxg19k4o9lsMkVRarqu71IpDuEsFQqFs0qlcmdSmkscxIVDc9iv8UWn01kpl8sp/GKn3W47JiQszcHcfeIA6UW3xgZMHbarquqJpmnpcDgckSTJkrTRaLBisai0Wq0kCD/YdcVHABer1eonu2wJQ9ibpFbtdomWSjtoxTRILx33MbWe3++3vXCsMHxEJpMgj/XfsSkMm8NKpVLXNyQQy2QyU7chXqeE+r2JNqqjnXZQ0234KsX6SQO75oi4V4Z4b3OI9BxEz/D6BvYW/jJiWfpmVQ5uUjcZy11Db9LSD+AvI5w1QLKIRekbYeCvHh8fy7bEnPNYPp/X0c8v8LoFq5kkRLEtwhAWc54PXUImvfkQjyewnIOD9x59fIo5q7bEGAe3uSPQxzmzOZzd0xCMfenmuLeM/z9iIfMyNBbB+rvSeBn7vbxrrpdiRhYXyFwnDsmeOMxdUSh5BDbh5QlYnHzXiJHpQBT2fHeIZwwlgO+OKPSJAgv4+IAMfoJiYxNj6UOisBezFoWzAQ+bC0mMj05iSBTOhXwbsJTdyUv6PXxvPiJNyN7xTrjabLMfSqNW19t/RSGcpYuCelaoNO9MSnOJg7hwzP+JwnaHrfwqa6nvSr2jt53f0YSlOZi7TxwgNReFZbV1UtPU9OOwFJmSrP8S/G602M9iQ9FanSQI7UUhgItKVbcVhYQh7E1SS1GIlko7aMU0SJ2LQg41FPSLtheOFcaUeFoWJ9HXA1FIe5krayxXajDjvhLmy+sHzkUh7t2BKKTeRBvVryrNnauqvg1fpVj//gfWmSikEzjtF7t3A4iI9BxEA1EIfxmxLH3rrm5EObhJ3SAK2RpOEC39AEsfEoWIRekbYYBd/fxq1l4UerkQ+5pX9ZKq24pCwhAWc+xFIZZ4K1GIPj7FnCFR+EeAAQAmX9FOK3vyIwAAAABJRU5ErkJggg==) repeat-x;
/* background: url("https://toprope.com.ua/i/icon/star22-rating-sprite.png") repeat-x; */
    height: 21px;
}
.star-ratings-sprite {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    text-indent: -999em;
    width: 110px;
    margin: 1rem 0;
}
.star-ratings-over {
    background-position: 0 100%;
    float: left;
    display:block;
}

.download-list {
    margin-bottom: 10px;
}
.download-list .download-id {
    width: 49%;
    float: left;
    margin-bottom: 2px;
}
.download-list .download-status {
    width: 49%;
    float: right;
    text-align: right;
    margin-bottom: 2px;
}
.download-list .download-content {
    padding: 10px 0px;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}
.download-list .download-content div {
    float: left;
    width: 33.3%;
}
.download-list .download-info {
    text-align: right;
}

/* ── з catalog/view/theme/account/account.tpl ── */
      .google-card{display:flex;gap:14px;align-items:flex-start;max-width:560px;margin-top:20px;padding:14px 16px;border:1px solid #e2e6ea;border-radius:8px;background:#fafbfc}
      .google-card svg{flex:none;margin-top:2px}
      .google-card-title{font-weight:bold;margin-bottom:3px}
      .google-card-text{font-size:14px;color:#44505e;margin-bottom:10px}
      .google-card form{margin:0}
      .google-card-link{background:none;border:0;padding:0;color:#1b6fb8;font:inherit;font-size:14px;text-decoration:underline;cursor:pointer}
      

/* ── з catalog/view/theme/account/auth_style.tpl ── */
.auth-page{max-width:64rem;margin:0 auto 3rem}
.auth-page > h1{margin-top:0}
.auth-page .warning,.auth-page .success{margin:0 0 1.5rem}
.auth-page .content td:first-child{vertical-align:top;padding-top:1.2rem}
.auth-page .content td:first-child label{cursor:default}
.auth-page .buttons{margin-bottom:0}
.auth-page .buttons .left{line-height:3rem;font-size:1.4rem}
.auth-page .buttons button.button{font-size:1.5rem;line-height:3rem;cursor:pointer}
.auth-page .content .pm-box{display:block;width:90%}
.auth-page .content .pm-field input{width:100%}
.auth-intro{margin:0 0 1.5rem;font-size:1.4rem;line-height:1.5}
.auth-muted{color:#666;font-size:1.3rem}
.auth-field-link{display:block;margin-top:.5rem;font-size:1.3rem}
.auth-agree{display:flex;align-items:flex-start;gap:.8rem;line-height:1.5}
.auth-agree input{flex:none;margin:.2rem 0 0}
.auth-alt{max-width:32rem;margin:2rem auto 0;text-align:center}
.auth-alt .g-or{margin:0 0 1.5rem}
.auth-alt .g-btn{width:100%}
.auth-foot{margin:1.6rem 0 0;text-align:center;color:#555}
@media (max-width:520px){
  .auth-page table.form,.auth-page table.form tbody,.auth-page table.form tr,.auth-page table.form td{display:block;width:auto}
  .auth-page .content td:first-child{text-align:left;padding:.8rem 0 .2rem}
  .auth-page .content td:first-child:empty{display:none}
  .auth-page .content input[type="text"],.auth-page .content input[type="email"],.auth-page .content input[type="tel"],
  .auth-page .content input[type="password"],.auth-page .content .pm-box{width:100%;box-sizing:border-box}
}

/* ── з catalog/view/theme/account/edit.tpl ── */
.email-pending{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:15px}

/* ── з catalog/view/theme/account/google_complete.tpl ── */
.google-verified{color:#2e9e6b;font-size:1.3rem;margin-left:6px}.auth-static{padding-top:1.2rem!important;font-size:1.4rem}.has-error > input{border-color:#e03131}

/* ── з catalog/view/theme/account/google_confirm.tpl ── */
  .google-confirm label{display:block;font-weight:bold;margin:12px 0 4px}
  .google-confirm input[type=password]{width:100%;max-width:320px;box-sizing:border-box;padding:8px 10px}
  .google-confirm .buttons{display:flex;align-items:center;gap:16px;margin-top:14px}
  

/* ── з catalog/view/theme/account/password.tpl ── */
  #password .content td:first-child{vertical-align:top;padding-top:1.2rem}
  #password .content .pm-box{display:block;width:90%}
  #password .content .pm-field input{width:100%}
  #password .has-error > input,#password .has-error .pm-field input{border-color:#e03131}
  .pw-field-link{display:block;margin-top:.5rem;font-size:1.3rem}
  #password .buttons button.button{font-size:1.5rem;line-height:3rem;cursor:pointer}
  

/* ── з catalog/view/theme/account/register.tpl ── */
.has-error > input,.has-error .pm-field input{border-color:#e03131}

/* ── з catalog/view/theme/account/reset.tpl ── */
.has-error > input,.has-error .pm-field input{border-color:#e03131}