.user-login-page {
    background:#f5f1e9
}
.user-login-hero {
    min-height:calc(100vh - 116px);
    padding:48px 20px;
    background:linear-gradient(110deg,rgba(11,10,9,.82),rgba(11,10,9,.28)),url('../img/storefront/hero-noir.jpg') center 30%/cover
}
.user-login-card {
    width:min(100%,500px);
    padding:44px 46px;
    border-radius:16px;
    box-shadow:0 24px 80px rgba(0,0,0,.28)
}
.user-login-logo {
    width:178px;
    margin-bottom:25px
}
.user-login-logo img {
    border-radius:4px
}
.user-login-card h1 {
    font-size:clamp(42px,5vw,54px);
    line-height:1;
    margin:10px 0
}
.user-login-card>p {
    font-size:14px;
    margin-bottom:25px
}
.login-input {
    border-radius:9px;
    transition:border-color .2s,box-shadow .2s
}
.login-input:focus-within {
    box-shadow:0 0 0 3px rgba(200,155,73,.15)
}
.login-input input::placeholder {
    color:#938d84;
    opacity:1
}
.password-toggle {
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#756c61;
    font-size:18px;
    cursor:pointer
}
.password-toggle:hover,.password-toggle:focus-visible {
    background:#f5efdf;
    color:#765318
}
.password-toggle:focus-visible {
    outline:2px solid var(--gold);
    outline-offset:2px
}
.user-login-card .form-label {
    margin:15px 0 7px
}
.user-login-card .btn-gold {
    border-radius:9px;
    min-height:51px;
    margin-top:25px!important
}
.account-switch {
    padding-top:18px;
    border-top:1px solid #ece7df;
    margin-top:25px
}
.account-switch a:hover,.login-secondary:hover {
    color:#ab7926
}
.account-page {
    background:#f7f5f0;
    min-height:65vh;
    padding-bottom:90px
}
.account-top {
    background:#171513;
    color:#fff;
    padding:24px 0 42px
}
.account-top h1 {
    font-size:clamp(42px,4vw,54px);
    line-height:1;
    margin:7px 0 9px
}
.account-top p {
    color:#c4beb5;
    margin:0;
    font-size:13px
}
.account-layout {
    display:grid;
    grid-template-columns:258px minmax(0,1fr);
    gap:32px;
    align-items:start;
    margin-top:-18px;
    position:relative
}
.account-sidebar,.account-panel,.account-stats>div,.account-shortcuts>a {
    background:#fff;
    border:1px solid #ebe6dc;
    border-radius:12px;
    box-shadow:0 9px 32px rgba(32,25,14,.035)
}
.account-sidebar {
    overflow:hidden;
    position:sticky;
    top:112px
}
.account-person {
    display:flex;
    align-items:center;
    gap:12px;
    padding:23px 20px;
    border-bottom:1px solid #eee8dd
}
.account-person div {
    min-width:0
}
.account-person strong,.account-person small {
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.account-person strong {
    font-size:13px
}
.account-person small {
    font-size:11px;
    color:#777;
    margin-top:3px
}
.account-avatar {
    flex:0 0 43px;
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    background:#efe1c6;
    color:#6a4b1d;
    border-radius:50%;
    font:700 21px 'Cormorant Garamond',serif
}
.account-sidebar nav {
    padding:11px
}
.account-sidebar nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 12px;
    border-radius:8px;
    color:#4a4742;
    font-size:12px;
    font-weight:700
}
.account-sidebar nav a i {
    font-size:17px;
    color:#8b806f
}
.account-sidebar nav a span {
    margin-left:auto;
    color:#8c7e67
}
.account-sidebar nav a:hover,.account-sidebar nav a.active {
    background:#f5efdf;
    color:#6b4a16
}
.account-sidebar nav a.active i {
    color:#a27633
}
.account-content {
    min-width:0;
    padding-top:29px
}
.account-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}
.account-heading h2 {
    font-size:clamp(38px,4vw,52px);
    line-height:1;
    margin:9px 0
}
.account-heading p {
    color:#746e65;
    font-size:13px;
    margin:0
}
.account-outline,.account-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:13px 18px;
    border-radius:7px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em
}
.account-outline {
    border:1px solid #b8a57e
}
.account-outline:hover {
    background:#f1e8d5
}
.account-primary {
    border:0;
    background:#171513;
    color:#fff
}
.account-primary:hover {
    background:#8b6328;
    color:#fff
}
.account-stats {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-bottom:22px
}
.account-stats>div {
    padding:23px;
    display:grid;
    gap:7px
}
.account-stats i {
    color:#ac7d36;
    font-size:22px
}
.account-stats span {
    font-size:11px;
    color:#766f65
}
.account-stats strong {
    font:600 33px 'Cormorant Garamond',serif;
    line-height:1
}
.account-panel {
    padding:27px;
    margin-bottom:20px
}
.account-panel-head {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    margin-bottom:15px
}
.account-panel h3 {
    font-size:29px;
    margin:7px 0 15px
}
.account-panel-head h3 {
    margin-bottom:0
}
.account-panel-head>a {
    font-size:11px;
    font-weight:700;
    color:#916524
}
.account-order-row {
    display:grid;
    grid-template-columns:minmax(130px,1fr) minmax(100px,150px) 100px auto;
    align-items:center;
    gap:16px;
    padding:16px 0;
    border-top:1px solid #eee9e1;
    font-size:12px
}
.account-order-row:hover {
    color:#9d712e
}
.account-order-row>span:first-child strong,.account-order-row small {
    display:block
}
.account-order-row small {
    color:#827b70;
    margin-top:5px
}
.account-order-row>strong {
    text-align:right
}
.account-order-row>i {
    color:#9e7b43
}
.order-status {
    display:inline-block;
    width:max-content;
    max-width:100%;
    padding:7px 10px;
    border-radius:20px;
    background:#f5ecd8;
    color:#805e24;
    font-size:10px;
    font-weight:800;
    white-space:nowrap
}
.order-status.status-delivered {
    background:#e4f2e8;
    color:#226439
}
.order-status.status-cancelled,.order-status.status-rejected {
    background:#fbe9e7;
    color:#a33e36
}
.order-status.status-out_for_delivery {
    background:#e6effe;
    color:#285a9e
}
.order-view {
    white-space:nowrap;
    color:#8d672e;
    font-weight:700
}
.account-empty {
    text-align:center;
    padding:34px 12px
}
.account-empty>i {
    font-size:30px;
    color:#ad813f
}
.account-empty h4 {
    font:600 30px 'Cormorant Garamond',serif;
    margin:10px 0
}
.account-empty p {
    font-size:12px;
    color:#777
}
.account-empty .account-primary {
    margin-top:12px
}
.account-shortcuts {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px
}
.account-shortcuts>a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:20px
}
.account-shortcuts>a>i:first-child {
    font-size:22px;
    color:#a87c3b
}
.account-shortcuts>a>i:last-child {
    margin-left:auto;
    font-size:14px
}
.account-shortcuts span {
    display:grid;
    gap:3px
}
.account-shortcuts strong {
    font-size:12px
}
.account-shortcuts small {
    font-size:10px;
    color:#777
}
.account-back {
    display:inline-flex;
    gap:8px;
    align-items:center;
    font-size:11px;
    color:#8b6428;
    margin-bottom:18px
}
.tracking-panel {
    padding-bottom:32px
}
.tracking-steps {
    list-style:none;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    padding:0;
    margin:30px 0 12px
}
.tracking-steps li {
    position:relative;
    display:grid;
    justify-items:center;
    text-align:center;
    gap:9px;
    color:#aaa;
    font-size:10px
}
.tracking-steps li:not(:first-child):before {
    content:'';
    position:absolute;
    left:-50%;
    right:50%;
    top:15px;
    border-top:2px solid #dedbd4
}
.tracking-steps li.done:not(:first-child):before {
    border-color:#b58b49
}
.tracking-steps li>span {
    z-index:1;
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#ebe8e1;
    color:#a6a099
}
.tracking-steps li.done>span {
    background:#b58b49;
    color:#fff
}
.tracking-steps li.current b {
    color:#866025
}
.tracking-note {
    margin:24px 0 0;
    font-size:12px;
    color:#70695f
}
.order-detail-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:18px
}
.order-detail-grid .account-panel {
    margin:0
}
.account-item {
    display:grid;
    grid-template-columns:57px minmax(0,1fr) auto;
    gap:13px;
    align-items:center;
    padding:13px 0;
    border-bottom:1px solid #eee9e1
}
.account-item img {
    width:57px;
    height:65px;
    object-fit:cover;
    border-radius:4px
}
.account-item strong,.account-item small {
    display:block;
    font-size:11px
}
.account-item small {
    color:#777;
    margin-top:5px
}
.account-item b {
    font-size:11px
}
.account-total {
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:14px;
    font-size:12px
}
.account-total.grand {
    border-top:1px solid #e3ded6;
    padding-top:15px;
    font-weight:800
}
.order-detail-grid p {
    line-height:1.9;
    font-size:12px;
    color:#67615a
}
.account-form-panel {
    max-width:680px;
    padding:32px
}
.account-field-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px
}
.account-field-grid .wide {
    grid-column:1/-1
}
.account-field-grid label {
    display:block;
    font-size:11px;
    font-weight:800;
    margin-bottom:8px
}
.account-field-grid input {
    width:100%;
    height:46px;
    border:1px solid #d9d2c7;
    border-radius:7px;
    padding:0 13px;
    outline:0;
    background:#fff;
    font-size:13px
}
.account-field-grid input:focus {
    border-color:#b98d47;
    box-shadow:0 0 0 3px rgba(200,155,73,.14)
}
.account-form-panel .account-primary {
    margin-top:25px
}
.form-hint {
    font-size:11px;
    color:#777;
    margin:14px 0 0
}
.account-alert {
    display:flex;
    gap:10px;
    align-items:center;
    padding:13px 16px;
    margin-bottom:20px;
    border-radius:7px;
    font-size:12px
}
.account-alert.success {
    background:#e7f2e7;
    color:#215c33
}
.account-alert.error {
    background:#fae9e7;
    color:#9d3831
}
@media(max-width:900px) {
    .account-layout {
        grid-template-columns:210px minmax(0,1fr);
        gap:20px
    }
    .account-order-row {
        grid-template-columns:minmax(105px,1fr) auto auto
    }
    .account-order-row .order-view {
        display:none
    }
    .order-detail-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:700px) {
    .user-login-hero {
        padding:24px 16px;
        min-height:auto
    }
    .user-login-card {
        padding:30px 24px;
        border-radius:12px
    }
    .account-page {
        padding-bottom:55px
    }
    .account-top {
        padding:22px 0 36px
    }
    .account-layout {
        display:block;
        margin-top:-16px
    }
    .account-sidebar {
        position:static;
        margin-bottom:20px
    }
    .account-sidebar nav {
        display:flex;
        overflow-x:auto;
        gap:5px
    }
    .account-sidebar nav a {
        flex:0 0 auto;
        white-space:nowrap
    }
    .account-sidebar nav a span {
        display:none
    }
    .account-person {
        padding:14px 16px
    }
    .account-content {
        padding-top:5px
    }
    .account-heading {
        align-items:start;
        flex-direction:column
    }
    .account-stats {
        gap:8px
    }
    .account-stats>div {
        padding:15px
    }
    .account-panel {
        padding:20px
    }
    .account-shortcuts {
        grid-template-columns:1fr
    }
    .tracking-steps {
        overflow-x:auto;
        min-width:0
    }
    .tracking-steps li b {
        font-size:9px
    }
}
@media(max-width:470px) {
    .account-stats span {
        font-size:9px
    }
    .account-stats strong {
        font-size:28px
    }
    .account-order-row {
        grid-template-columns:1fr auto;
        gap:8px
    }
    .account-order-row .order-status {
        grid-column:1
    }
    .account-order-row>strong {
        grid-column:2;
        grid-row:1
    }
    .account-field-grid {
        grid-template-columns:1fr
    }
    .account-field-grid .wide {
        grid-column:auto
    }
    .tracking-steps {
        grid-template-columns:repeat(6,80px);
        margin-left:-6px;
        margin-right:-6px
    }
    .order-detail-grid {
        gap:12px
    }
}
/* Customer account layout */
.account-page {
    background:#f8f7f4;
    padding-bottom:72px
}
.account-top {
    background:#fff;
    color:#201e1a;
    border-bottom:1px solid #e9e5dd;
    padding:27px 0
}
.account-top .container {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.account-top h1 {
    font:600 clamp(28px,3vw,37px)/1.18 Manrope,Arial,sans-serif;
    letter-spacing:-.035em;
    margin:5px 0 4px
}
.account-top p {
    color:#777167;
    font-size:12px
}
.account-top>a,.account-top .container>a {
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#725121;
    font-size:11px;
    font-weight:800;
    white-space:nowrap
}
.account-layout {
    grid-template-columns:236px minmax(0,1fr);
    gap:28px;
    margin-top:0;
    padding-top:30px
}
.account-sidebar {
    top:100px;
    border-radius:10px;
    box-shadow:none;
    border-color:#e9e5de
}
.account-person {
    padding:20px 18px
}
.account-avatar {
    background:#f1e3c8
}
.account-person strong {
    font-size:12px
}
.account-person small {
    font-size:10px
}
.account-sidebar nav {
    padding:9px
}
.account-sidebar nav a {
    padding:12px 11px;
    font-size:11px;
    border-radius:6px
}
.account-sidebar nav a.active {
    background:#f7f0df
}
.account-sidebar nav a:last-child {
    margin-top:8px;
    border-top:1px solid #eee9df;
    border-radius:0;
    padding-top:18px
}
.account-content {
    padding-top:0
}
.account-heading {
    margin-bottom:20px
}
.account-heading h2 {
    font:600 clamp(25px,2.7vw,34px)/1.2 Manrope,Arial,sans-serif;
    letter-spacing:-.03em;
    margin:5px 0 4px
}
.account-heading p {
    font-size:12px
}
.account-panel,.account-stats>div,.account-shortcuts>a {
    border-radius:10px;
    border-color:#e9e5de;
    box-shadow:none
}
.account-panel {
    padding:24px
}
.account-panel h3 {
    font:600 20px/1.3 Manrope,Arial,sans-serif;
    letter-spacing:-.02em
}
.account-featured-order {
    display:flex;
    align-items:center;
    gap:20px;
    padding:24px;
    border-radius:10px;
    background:#1e1b18;
    color:#fff;
    margin-bottom:18px;
    min-width:0
}
.featured-order-icon {
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:#3a342a;
    color:#dfbc7c;
    font-size:23px
}
.featured-order-main {
    flex:1;
    min-width:0
}
.featured-order-main h3 {
    font:700 20px/1.2 Manrope,Arial,sans-serif;
    margin:5px 0
}
.featured-order-main p {
    font-size:11px;
    color:#d4cfc6;
    margin:0 0 15px
}
.featured-order-main .eyebrow {
    font-size:9px
}
.featured-progress {
    height:5px;
    background:#49443c;
    border-radius:5px;
    overflow:hidden;
    max-width:440px
}
.featured-progress span {
    display:block;
    height:100%;
    background:#d7ac62;
    border-radius:inherit
}
.account-featured-order .account-primary {
    flex:0 0 auto;
    background:#d6ac63;
    color:#1a1713
}
.account-featured-order .account-primary:hover {
    background:#ebc889
}
.account-welcome-note {
    display:flex;
    align-items:center;
    gap:16px;
    padding:22px 24px;
    border:1px solid #e9e5de;
    border-radius:10px;
    background:#fff;
    margin-bottom:18px
}
.account-welcome-note>i {
    font-size:25px;
    color:#b88b46
}
.account-welcome-note div {
    flex:1
}
.account-welcome-note strong {
    font-size:13px
}
.account-welcome-note p {
    font-size:11px;
    color:#766e62;
    margin:4px 0 0
}
.account-welcome-note a {
    white-space:nowrap;
    color:#725121;
    font-size:11px;
    font-weight:800
}
.account-stats {
    gap:12px;
    margin-bottom:18px
}
.account-stats>div {
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:10px;
    padding:18px
}
.account-stats i {
    font-size:20px
}
.account-stats span {
    font-size:11px
}
.account-stats strong {
    font:700 23px Manrope,Arial,sans-serif
}
.account-panel-head {
    margin-bottom:11px
}
.account-panel-head h3 {
    margin-top:4px
}
.account-order-row {
    font-size:11px;
    min-height:66px
}
.account-order-row>span:first-child strong {
    font-size:12px
}
.account-order-row small {
    font-size:10px
}
.account-shortcuts>a {
    padding:17px
}
.account-shortcuts strong {
    font-size:11px
}
.account-form-panel {
    max-width:750px
}
.account-field-grid label {
    font-size:11px
}
.account-field-grid input {
    height:48px
}
@media(max-width:900px) {
    .account-layout {
        grid-template-columns:205px minmax(0,1fr);
        gap:18px
    }
    .account-featured-order {
        flex-wrap:wrap
    }
    .account-featured-order .account-primary {
        margin-left:68px
    }
    .account-stats>div {
        grid-template-columns:1fr auto;
        gap:4px
    }
    .account-stats i {
        grid-row:1
    }
    .account-stats span {
        grid-column:1
    }
    .account-stats strong {
        grid-column:2;
        grid-row:1/3
    }
}
@media(max-width:700px) {
    .account-top {
        padding:20px 0
    }
    .account-top .container {
        align-items:flex-start
    }
    .account-top h1 {
        font-size:28px
    }
    .account-top .container>a {
        display:none
    }
    .account-layout {
        display:block;
        padding-top:16px
    }
    .account-sidebar {
        margin-bottom:18px
    }
    .account-person {
        padding:13px 15px
    }
    .account-sidebar nav {
        display:flex;
        padding:8px;
        gap:4px
    }
    .account-sidebar nav a {
        padding:10px 12px
    }
    .account-sidebar nav a:last-child {
        margin:0;
        border:0;
        padding:10px 12px
    }
    .account-heading {
        margin-bottom:17px
    }
    .account-stats {
        gap:8px
    }
    .account-stats>div {
        display:block;
        padding:13px
    }
    .account-stats i,.account-stats span,.account-stats strong {
        display:block
    }
    .account-stats span {
        margin:6px 0
    }
    .account-stats strong {
        font-size:20px
    }
    .account-featured-order {
        padding:19px;
        gap:13px
    }
    .account-featured-order .account-primary {
        margin-left:0
    }
    .account-panel {
        padding:18px
    }
}
@media(max-width:470px) {
    .account-featured-order {
        display:grid;
        grid-template-columns:42px 1fr
    }
    .featured-order-icon {
        width:42px;
        height:42px;
        flex-basis:42px
    }
    .account-featured-order .account-primary {
        grid-column:1/-1;
        width:100%
    }
    .account-welcome-note {
        flex-wrap:wrap;
        padding:18px
    }
    .account-welcome-note a {
        margin-left:42px
    }
    .account-order-row {
        grid-template-columns:1fr auto
    }
    .account-stats>div {
        padding:11px
    }
    .account-stats span {
        font-size:9px
    }
    .account-stats strong {
        font-size:18px
    }
}
@media(max-width:700px) {
    .account-sidebar .account-person {
        display:none
    }
    .account-sidebar nav {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:4px;
        overflow:visible
    }
    .account-sidebar nav a {
        min-width:0;
        white-space:normal;
        font-size:10px
    }
    .account-sidebar nav a span {
        display:inline;
        margin-left:auto
    }
    .account-sidebar nav a:last-child {
        grid-column:1/-1;
        margin-top:3px;
        border-top:1px solid #eee9df;
        padding-top:12px
    }
}