/* =====================================================
   FLEXI COMMERCE — ACCOUNT
   Complete Clean / Responsive / Compact Dashboard
===================================================== */


/* =====================================================
   GLOBAL RESET
===================================================== */

.fc-account-page,
.fc-account-page *,
.fc-account-page *::before,
.fc-account-page *::after {
    box-sizing: border-box;
}


.fc-account-page img {
    max-width: 100%;
    height: auto;
}


.fc-account-page button,
.fc-account-page input,
.fc-account-page select,
.fc-account-page textarea {
    font: inherit;
}


/* =====================================================
   ACCOUNT PAGE
===================================================== */

.fc-account-page {
    width: 100%;
    min-height: 600px;

    margin: 0;
    padding: 60px 20px 80px;

    background: #f6f8f7;

    color: #202a26;

    font-family: inherit;

    -webkit-font-smoothing: antialiased;
}


.fc-account-container {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;
}


.fc-account-dashboard {
    width: 100%;
}


/* =====================================================
   HERO
===================================================== */

.fc-account-hero {
    width: 100%;

    margin: 0 0 28px;
    padding: 44px 48px;

    background: #ffffff;

    border: 1px solid #e2e9e5;
    border-radius: 22px;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.04);
}


.fc-account-eyebrow {
    display: block;

    margin: 0 0 10px;

    color: #0f513f;

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.fc-account-hero h1 {
    margin: 0 0 12px;

    color: #16211d;

    font-size: 42px;
    line-height: 1.15;
    font-weight: 600;
}


.fc-account-hero h1 strong {
    color: #0f513f;

    font-weight: 700;
}


.fc-account-hero p {
    margin: 0;

    color: #68736e;

    font-size: 16px;
    line-height: 1.7;
}


/* =====================================================
   NOTICE
===================================================== */

.fc-account-page .fc-account-empty,
.fc-account-page .fc-account-notice {

    width: 100%;

    margin: 0 0 16px;

    padding: 17px 20px;

    border: 1px solid #e2e9e5;
    border-radius: 14px;

    background: #ffffff;

    color: #68736e;

    font-size: 14px;
    line-height: 1.6;
}


/* =====================================================
   DASHBOARD
   IMPORTANT: SINGLE VERTICAL COLUMN
===================================================== */

.fc-account-dashboard-grid {

    display: flex !important;

    flex-direction: column !important;

    gap: 12px !important;

    width: 100% !important;

    margin: 0 !important;
}


/* =====================================================
   ACCOUNT CARD
===================================================== */

.fc-account-card {

    position: relative;

    display: block !important;

    width: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    background: #ffffff;

    border: 1px solid #e2e9e5;

    border-radius: 16px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.035);

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.fc-account-card:hover {

    border-color: #d2ded8;

    box-shadow:
        0 7px 24px rgba(0, 0, 0, 0.05);
}


.fc-account-card.is-open {

    border-color: #cbdcd3;

    box-shadow:
        0 9px 28px rgba(15, 81, 63, 0.065);
}


/* =====================================================
   COMPACT CARD HEADER
===================================================== */

.fc-account-card-top {

    position: relative;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 70px !important;

    margin: 0 !important;

    padding:
        11px
        58px
        11px
        16px !important;

    background: #ffffff;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;

    transition:
        background-color .18s ease;
}


.fc-account-card-top:hover {

    background: #fbfdfc;
}


.fc-account-card.is-open
.fc-account-card-top {

    background: #fbfdfc;
}


/* =====================================================
   CARD ICON
===================================================== */

.fc-account-card-icon {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 13px 0 0 !important;

    border-radius: 12px;

    background: #edf6f2;

    font-size: 20px;

    line-height: 1;

    overflow: hidden;
}


.fc-account-card-icon span {

    display: block;

    line-height: 1;
}


/* =====================================================
   TAB TITLE
   Header currently contains icon + status only,
   so title is generated here.
===================================================== */

.fc-account-card-top::before {

    display: block;

    flex: 1 1 auto;

    min-width: 0;

    color: #24332d;

    font-size: 15px;

    line-height: 1.3;

    font-weight: 750;

    letter-spacing: -0.01em;
}


.fc-account-card-orders
.fc-account-card-top::before {
    content: "My Orders";
}


.fc-account-card-details
.fc-account-card-top::before {
    content: "Account Details";
}


.fc-account-card-address
.fc-account-card-top::before {
    content: "My Addresses";
}


.fc-account-card-security
.fc-account-card-top::before {
    content: "Change Password";
}


/* =====================================================
   STATUS / COUNT
===================================================== */

.fc-account-card-status {

    position: absolute;

    top: 50%;
    right: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 25px;

    padding: 5px 9px;

    border-radius: 999px;

    background: #f1f5f3;

    color: #5d6d65;

    font-size: 10px;
    line-height: 1;

    font-weight: 750;

    letter-spacing: .035em;

    text-transform: uppercase;

    white-space: nowrap;

    transform: translateY(-50%);
}


/* =====================================================
   ARROW
===================================================== */

.fc-account-card-top::after {

    content: "";

    position: absolute;

    top: 50%;
    right: 22px;

    width: 8px;
    height: 8px;

    border-right: 2px solid #5b6b63;
    border-bottom: 2px solid #5b6b63;

    transform:
        translateY(-70%)
        rotate(45deg);

    transition:
        transform .22s ease,
        border-color .18s ease;
}


.fc-account-card.is-open
.fc-account-card-top::after {

    transform:
        translateY(-25%)
        rotate(225deg);

    border-color: #0f513f;
}


/* =====================================================
   CARD CONTENT
   CLOSED
===================================================== */

.fc-account-card-content {

    display: block;

    width: 100%;

    max-height: 0;

    margin: 0 !important;

    padding:
        0
        20px !important;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-5px);

    transition:
        max-height .35s ease,
        padding-top .25s ease,
        padding-bottom .25s ease,
        opacity .20s ease,
        transform .25s ease,
        visibility 0s linear .35s;
}


/* =====================================================
   CARD CONTENT
   OPEN
===================================================== */

.fc-account-card.is-open
.fc-account-card-content {

    max-height: 20000px;

    padding:
        20px !important;

    overflow: visible;

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition:
        max-height .45s ease,
        padding-top .25s ease,
        padding-bottom .25s ease,
        opacity .22s ease,
        transform .25s ease,
        visibility 0s linear 0s;
}


/* =====================================================
   SECTION HEADING
===================================================== */

.fc-account-section-heading {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    margin: 0 0 18px;
}


.fc-account-section-heading h2,
.fc-account-card-content h2 {

    margin: 0 0 7px;

    color: #17221e;

    font-size: 23px;

    line-height: 1.25;

    font-weight: 650;
}


.fc-account-section-heading p,
.fc-account-card-content > p {

    margin: 0;

    color: #6d7772;

    font-size: 14px;

    line-height: 1.6;
}


.fc-account-text-link {

    flex: 0 0 auto;

    color: #0f513f;

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}


.fc-account-text-link:hover {

    text-decoration: underline;
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.fc-account-primary-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 130px;

    min-height: 44px;

    padding:
        10px
        18px;

    box-sizing: border-box;

    border: 1px solid #0f513f;
    border-radius: 10px;

    background: #0f513f;

    color: #ffffff;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 650;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.fc-account-primary-button:hover {

    background: #0b4334;

    border-color: #0b4334;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px
        rgba(15, 81, 63, .16);
}


.fc-account-primary-button:active {

    transform: translateY(0);

    box-shadow: none;
}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.fc-account-secondary-button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 0;

    min-height: 42px;

    padding:
        10px
        17px;

    border: 1px solid #0f513f;

    border-radius: 10px;

    background: #ffffff;

    color: #0f513f;

    font-family: inherit;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 650;

    text-decoration: none;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


.fc-account-secondary-button:hover {

    background: #0f513f;

    border-color: #0f513f;

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px
        rgba(15, 81, 63, .14);
}


.fc-account-secondary-button:active {

    transform: translateY(0);

    box-shadow: none;
}


/* =====================================================
   ORDERS
===================================================== */

.fc-account-orders-list {

    display: flex;

    flex-direction: column;

    width: 100%;

    border: 1px solid #e8eeeb;

    border-radius: 13px;

    overflow: hidden;

    background: #ffffff;
}


.fc-account-order-item {

    display: grid;

    grid-template-columns:
        minmax(260px, 2.2fr)
        minmax(90px, .8fr)
        minmax(120px, 1fr)
        minmax(120px, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    width: 100%;

    padding:
        14px 15px;

    border-bottom: 1px solid #edf1ef;

    background: #ffffff;

    transition:
        background-color .18s ease;
}


.fc-account-order-item:last-child {

    border-bottom: 0;
}


.fc-account-order-item:hover {

    background: #fbfdfc;
}


/* PRODUCT */

.fc-account-order-product {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.fc-account-order-thumbnail {

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    overflow: hidden;

    border: 1px solid #e4ebe7;

    border-radius: 10px;

    background: #f7f9f8;

    color: #7c8982;

    font-size: 20px;
}


.fc-account-order-thumbnail img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.fc-account-order-product-info {

    display: flex;

    flex-direction: column;

    min-width: 0;

    gap: 3px;
}


.fc-account-order-product-info strong {

    display: block;

    color: #27352f;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 650;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.fc-account-order-product-info span {

    color: #7a8580;

    font-size: 12px;

    line-height: 1.4;
}


.fc-account-order-product-info small {

    color: #8a938f;

    font-size: 11px;

    line-height: 1.4;
}


/* ORDER COLUMNS */

.fc-account-order-column {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;
}


.fc-account-order-column > span {

    color: #8a938f;

    font-size: 10px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: .04em;

    text-transform: uppercase;
}


.fc-account-order-column > strong {

    color: #27352f;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 650;
}


/* STATUS */

.fc-account-order-status {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    max-width: 100%;

    padding:
        5px 8px;

    border-radius: 999px;

    font-size: 10px !important;

    line-height: 1.2 !important;

    font-weight: 750 !important;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.fc-account-order-status-processing,
.fc-account-order-status-confirmed,
.fc-account-order-status-packed,
.fc-account-order-status-shipped,
.fc-account-order-status-out_for_delivery {

    background: #eef5f1;

    color: #35654f;
}


.fc-account-order-status-delivered,
.fc-account-order-status-completed {

    background: #eaf6ee;

    color: #267044;
}


.fc-account-order-status-pending_payment,
.fc-account-order-status-on_hold {

    background: #f7f2e7;

    color: #826a2f;
}


.fc-account-order-status-cancelled,
.fc-account-order-status-failed {

    background: #f9eded;

    color: #a24646;
}


.fc-account-order-status-refunded {

    background: #f0edf7;

    color: #66518a;
}


/* ACTION */

.fc-account-order-action {

    display: flex;

    align-items: center;

    justify-content: flex-end;
}


/* =====================================================
   ORDER FOOTER
===================================================== */

.fc-account-orders-footer {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    width: 100%;

    margin: 17px 0 0;

    padding:
        15px 0 0;

    border-top: 1px solid #edf1ef;
}


.fc-account-orders-footer > span {

    color: #7b8580;

    font-size: 12px;

    line-height: 1.5;
}


/* =====================================================
   EMPTY ORDERS
===================================================== */

.fc-account-empty-orders {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding:
        38px 20px;

    border: 1px dashed #dbe4df;

    border-radius: 13px;

    background: #fbfcfb;

    text-align: center;
}


.fc-account-empty-orders-icon {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 12px;

    border-radius: 14px;

    background: #edf6f2;

    font-size: 22px;
}


.fc-account-empty-orders strong {

    color: #293730;

    font-size: 15px;

    line-height: 1.4;
}


.fc-account-empty-orders p {

    max-width: 420px;

    margin: 6px 0 0;

    color: #7b8580;

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================
   ORDER PAGINATION
===================================================== */

.fc-account-pagination {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    width: 100%;

    margin: 20px 0 0;
}


.fc-account-pagination a {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 1px solid #dce5e0;

    border-radius: 9px;

    background: #ffffff;

    color: #506158;

    font-size: 13px;

    font-weight: 650;

    text-decoration: none;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}


.fc-account-pagination a:hover {

    border-color: #0f513f;

    background: #f1f7f4;

    color: #0f513f;
}


.fc-account-pagination a.is-active {

    border-color: #0f513f;

    background: #0f513f;

    color: #ffffff;
}


/* =====================================================
   ACCOUNT DETAILS
===================================================== */

.fc-account-details {

    width: 100%;

    margin: 18px 0 0;

    border: 1px solid #e7edea;

    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;
}


.fc-account-detail-row {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    min-height: 52px;

    padding:
        12px 15px;

    border-bottom: 1px solid #edf1ef;
}


.fc-account-detail-row:last-child {

    border-bottom: 0;
}


.fc-account-detail-label {

    flex: 0 0 auto;

    color: #7b8580;

    font-size: 13px;

    line-height: 1.5;
}


.fc-account-detail-value {

    max-width: 70%;

    color: #26332d;

    font-size: 14px;

    line-height: 1.5;

    font-weight: 650;

    text-align: right;

    overflow-wrap: anywhere;
}


/* =====================================================
   ADDRESS SECTION
===================================================== */

.fc-account-address-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;

    margin: 0 0 16px;
}


.fc-account-address-item {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    padding: 16px;

    border: 1px solid #e3eae6;

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 3px 12px
        rgba(0,0,0,.025);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.fc-account-address-item:hover {

    border-color: #cbdad3;

    box-shadow:
        0 6px 18px
        rgba(15,81,63,.055);
}


.fc-account-address-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 0 0 11px;

    padding-bottom: 10px;

    border-bottom: 1px solid #edf1ef;
}


.fc-account-address-header strong {

    color: #0f513f;

    font-size: 14px;

    line-height: 1.4;

    font-weight: 750;
}


.fc-account-address-body {

    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

    color: #68736e;

    font-size: 13px;

    line-height: 1.55;
}


.fc-account-address-body strong {

    color: #26332d;

    font-size: 14px;
}


.fc-account-address-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 15px;

    padding-top: 13px;

    border-top: 1px solid #edf1ef;
}


.fc-account-address-actions a,
.fc-account-address-actions button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 35px;

    padding:
        7px 12px;

    border: 1px solid #d9e3de;

    border-radius: 8px;

    background: #ffffff;

    color: #53635a;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 650;

    text-decoration: none;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;
}


.fc-account-address-actions a:hover,
.fc-account-address-actions button:hover {

    border-color: #0f513f;

    color: #0f513f;

    background: #f5faf7;
}


.fc-account-address-actions .fc-account-address-delete,
.fc-account-address-actions button[name*="delete"] {

    border-color: #ead1d1;

    color: #a14a4a;
}


.fc-account-address-actions .fc-account-address-delete:hover,
.fc-account-address-actions button[name*="delete"]:hover {

    border-color: #d27b7b;

    background: #fff7f7;

    color: #a12626;
}


/* =====================================================
   ADD ADDRESS BUTTON AREA
===================================================== */

.fc-account-address-add {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    width: 100%;

    margin-top: 4px;
}


/* =====================================================
   ADDRESS FORM
===================================================== */

.fc-account-address-form {

    width: 100%;

    margin: 0;

    padding: 18px;

    border: 1px solid #e2eae5;

    border-radius: 13px;

    background: #fbfcfb;
}


.fc-account-address-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: 100%;
}


.fc-account-form-field {

    width: 100%;

    min-width: 0;
}


.fc-account-form-field-full,
.fc-account-form-field.full-width {

    grid-column: 1 / -1;
}


.fc-account-form-field label {

    display: block;

    margin: 0 0 6px;

    color: #3c4b44;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 650;
}


.fc-account-form-field input,
.fc-account-form-field select,
.fc-account-form-field textarea {

    display: block;

    width: 100%;

    min-height: 44px;

    padding:
        10px 12px;

    border: 1px solid #d8e1dc;

    border-radius: 9px;

    background: #ffffff;

    color: #27352f;

    font-family: inherit;

    font-size: 14px;

    line-height: 1.4;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}


.fc-account-form-field textarea {

    min-height: 90px;

    resize: vertical;
}


.fc-account-form-field input:hover,
.fc-account-form-field select:hover,
.fc-account-form-field textarea:hover {

    border-color: #bdcbc3;
}


.fc-account-form-field input:focus,
.fc-account-form-field select:focus,
.fc-account-form-field textarea:focus {

    border-color: #6c9a83;

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(15,81,63,.09);
}


.fc-account-form-field input::placeholder,
.fc-account-form-field textarea::placeholder {

    color: #a0aaa5;
}


/* =====================================================
   ADDRESS FORM ACTIONS
===================================================== */

.fc-account-address-form-actions {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 18px;

    padding-top: 16px;

    border-top: 1px solid #e7edea;
}


/* =====================================================
   PASSWORD
===================================================== */

.fc-account-password-form {

    width: 100%;

    max-width: 620px;

    margin: 18px 0 0;
}


.fc-account-password-form
.fc-account-form-field {

    margin-bottom: 14px;
}


/* PASSWORD FIELD WRAPPER */

.fc-account-password-field {

    position: relative;

    width: 100%;
}


/* PASSWORD INPUT */

.fc-account-password-field input {

    display: block;

    width: 100%;

    min-height: 46px;

    padding:
        10px
        48px
        10px
        13px !important;

    border: 1px solid #d8e1dc;

    border-radius: 9px;

    background: #ffffff;

    color: #27352f;

    outline: none;

    box-sizing: border-box;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}


.fc-account-password-field input:focus {

    border-color: #6c9a83;

    box-shadow:
        0 0 0 3px
        rgba(15,81,63,.09);
}


/* EYE BUTTON */

.fc-account-password-toggle {

    position: absolute;

    top: 50%;

    right: 7px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 8px;

    background: transparent;

    color: #607168;

    cursor: pointer;

    transform: translateY(-50%);

    appearance: none;

    -webkit-appearance: none;

    transition:
        background-color .18s ease,
        color .18s ease;
}


.fc-account-password-toggle:hover {

    background: #eef5f1;

    color: #315f46;
}


.fc-account-password-toggle:focus,
.fc-account-password-toggle:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(63,105,80,.12);
}


.fc-account-password-toggle span {

    display: block;

    line-height: 1;
}


/* PASSWORD SUBTEXT */

.fc-account-password-form
.fc-account-form-field small {

    display: block;

    margin-top: 5px;

    color: #89938e;

    font-size: 11px;

    line-height: 1.4;
}


/* PASSWORD BUTTON */

.fc-account-password-form
.fc-account-primary-button {

    width: auto;

    min-width: 150px;

    margin-top: 2px;
}


/* FORGOT PASSWORD */

.fc-account-forgot-password {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    margin-top: 15px;

    color: #737e78;

    font-size: 13px;

    line-height: 1.5;
}


.fc-account-forgot-password a {

    color: #0f513f;

    font-weight: 700;

    text-decoration: none;
}


.fc-account-forgot-password a:hover {

    text-decoration: underline;
}


/* =====================================================
   CARD FOOTER
===================================================== */

.fc-account-card-footer {

    width: 100%;

    margin: 22px 0 0;

    padding: 17px 0 0;

    border-top: 1px solid #edf0ee;
}


/* =====================================================
   MUTED
===================================================== */

.fc-account-muted {

    color: #8a938f;

    font-size: 13px;

    line-height: 1.5;
}


/* =====================================================
   LOGOUT — POLISHED BUTTON
===================================================== */

.fc-account-logout-area {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    margin: 28px 0 0;
}


/* -----------------------------------------------------
   LOGOUT BUTTON
----------------------------------------------------- */

.fc-account-logout-button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    min-width: 145px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 22px !important;

    box-sizing: border-box !important;

    border: 1px solid #e3b1b1 !important;
    border-radius: 11px !important;

    background: #ffffff !important;
    color: #a23d3d !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    white-space: nowrap !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    box-shadow:
        0 4px 14px rgba(180, 60, 60, .08) !important;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}


/* -----------------------------------------------------
   HOVER
----------------------------------------------------- */

.fc-account-logout-button:hover {

    background: #fff5f5 !important;

    border-color: #d87878 !important;

    color: #a12626 !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 7px 20px rgba(180, 60, 60, .14) !important;
}


/* -----------------------------------------------------
   ACTIVE
----------------------------------------------------- */

.fc-account-logout-button:active {

    background: #ffeded !important;

    border-color: #c96666 !important;

    color: #922020 !important;

    transform: translateY(0) !important;

    box-shadow:
        0 3px 9px rgba(180, 60, 60, .10) !important;
}


/* -----------------------------------------------------
   FOCUS
----------------------------------------------------- */

.fc-account-logout-button:focus,
.fc-account-logout-button:focus-visible {

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(180, 60, 60, .12),
        0 5px 15px rgba(180, 60, 60, .10) !important;
}


/* -----------------------------------------------------
   MOBILE
----------------------------------------------------- */

@media (max-width: 768px) {

    .fc-account-logout-area {

        margin-top: 22px;
    }


    .fc-account-logout-button {

        width: 100% !important;

        max-width: 220px !important;

        min-height: 45px !important;

        padding: 11px 20px !important;

        border-radius: 10px !important;
    }
}


/* -----------------------------------------------------
   SMALL MOBILE
----------------------------------------------------- */

@media (max-width: 480px) {

    .fc-account-logout-area {

        margin-top: 20px;
    }


    .fc-account-logout-button {

        width: 100% !important;

        max-width: none !important;

        min-height: 45px !important;

        border-radius: 10px !important;
    }
}

/* =====================================================
   LINKS
===================================================== */

.fc-account-page a {

    text-decoration: none;
}


.fc-account-page a:focus-visible,
.fc-account-page button:focus-visible {

    outline: 3px solid
        rgba(15,81,63,.20);

    outline-offset: 2px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 900px) {

    .fc-account-page {

        padding:
            40px
            16px
            60px;
    }


    .fc-account-hero {

        padding:
            34px
            30px;

        border-radius: 19px;
    }


    .fc-account-hero h1 {

        font-size: 34px;
    }


    .fc-account-order-item {

        grid-template-columns:
            minmax(220px, 2fr)
            minmax(90px, .8fr)
            minmax(110px, 1fr)
            minmax(110px, 1fr);

        gap: 12px;
    }


    .fc-account-order-action {

        grid-column: 1 / -1;

        justify-content: flex-start;

        padding-top: 10px;

        border-top: 1px solid #edf1ef;
    }
}


/* =====================================================
   MOBILE — 768
===================================================== */

@media (max-width: 768px) {

    .fc-account-page {

        min-height: 500px;

        padding:
            28px
            13px
            50px;
    }


    .fc-account-hero {

        margin-bottom: 16px;

        padding:
            27px
            21px;

        border-radius: 17px;
    }


    .fc-account-eyebrow {

        margin-bottom: 8px;

        font-size: 11px;
    }


    .fc-account-hero h1 {

        margin-bottom: 9px;

        font-size: 29px;

        line-height: 1.18;
    }


    .fc-account-hero p {

        font-size: 14px;

        line-height: 1.6;
    }


    .fc-account-dashboard-grid {

        gap: 9px !important;
    }


    .fc-account-card {

        border-radius: 14px;
    }


    .fc-account-card-top {

        min-height: 64px !important;

        padding:
            10px
            47px
            10px
            12px !important;
    }


    .fc-account-card-icon {

        width: 40px !important;
        height: 40px !important;

        margin-right: 11px !important;

        border-radius: 11px;

        font-size: 18px;
    }


    .fc-account-card-top::before {

        font-size: 14px;
    }


    .fc-account-card-status {

        right: 39px;

        min-height: 23px;

        padding:
            4px
            7px;

        font-size: 9px;
    }


    .fc-account-card-top::after {

        right: 16px;

        width: 7px;
        height: 7px;
    }


    .fc-account-card.is-open
    .fc-account-card-content {

        padding:
            16px !important;
    }


    .fc-account-section-heading {

        flex-direction: column;

        gap: 10px;

        margin-bottom: 15px;
    }


    .fc-account-section-heading h2,
    .fc-account-card-content h2 {

        font-size: 21px;
    }


    .fc-account-section-heading p,
    .fc-account-card-content > p {

        font-size: 13px;
    }


    /* ADDRESS */

    .fc-account-address-list {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    .fc-account-address-form {

        padding: 14px;
    }


    .fc-account-address-form-grid {

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .fc-account-form-field-full,
    .fc-account-form-field.full-width {

        grid-column: auto;
    }


    /* ORDERS */

    .fc-account-orders-list {

        border-radius: 11px;
    }


    .fc-account-order-item {

        display: grid;

        grid-template-columns:
            1fr
            1fr;

        gap: 12px;

        padding: 13px;
    }


    .fc-account-order-product {

        grid-column: 1 / -1;

        padding-bottom: 11px;

        border-bottom: 1px solid #edf1ef;
    }


    .fc-account-order-column {

        min-width: 0;
    }


    .fc-account-order-action {

        grid-column: 1 / -1;

        padding-top: 11px;

        border-top: 1px solid #edf1ef;
    }


    .fc-account-order-action
    .fc-account-secondary-button {

        width: 100%;
    }


    .fc-account-orders-footer {

        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }


    .fc-account-orders-footer
    .fc-account-primary-button {

        width: 100%;
    }


    /* DETAILS */

    .fc-account-detail-row {

        gap: 12px;
    }


    .fc-account-detail-value {

        max-width: 62%;
    }


    /* PASSWORD */

    .fc-account-password-form {

        max-width: none;
    }


    .fc-account-password-form
    .fc-account-primary-button {

        width: 100%;
    }


    /* LOGOUT */

    .fc-account-logout-button {

        width: 100%;

        max-width: 220px;
    }
}


/* =====================================================
   SMALL MOBILE — 480
===================================================== */

@media (max-width: 480px) {

    .fc-account-page {

        padding:
            18px
            10px
            42px;
    }


    .fc-account-hero {

        padding:
            23px
            17px;

        border-radius: 15px;
    }


    .fc-account-hero h1 {

        font-size: 26px;
    }


    .fc-account-hero p {

        font-size: 13px;
    }


    .fc-account-card-top {

        min-height: 61px !important;

        padding:
            9px
            43px
            9px
            10px !important;
    }


    .fc-account-card-icon {

        width: 38px !important;
        height: 38px !important;

        margin-right: 9px !important;

        border-radius: 10px;

        font-size: 17px;
    }


    .fc-account-card-top::before {

        font-size: 13px;
    }


    .fc-account-card-status {

        display: none;
    }


    .fc-account-card-top::after {

        right: 14px;
    }


    .fc-account-card.is-open
    .fc-account-card-content {

        padding:
            14px !important;
    }


    .fc-account-section-heading h2,
    .fc-account-card-content h2 {

        font-size: 20px;
    }


    /* ORDERS */

    .fc-account-order-item {

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }


    .fc-account-order-thumbnail {

        width: 50px;
        height: 50px;

        border-radius: 9px;
    }


    .fc-account-order-product-info strong {

        font-size: 13px;
    }


    .fc-account-order-product-info span {

        font-size: 11px;
    }


    .fc-account-order-column > span {

        font-size: 9px;
    }


    .fc-account-order-column > strong {

        font-size: 12px;
    }


    /* DETAILS */

    .fc-account-detail-row {

        display: block;

        min-height: 0;

        padding:
            11px 13px;
    }


    .fc-account-detail-value {

        display: block;

        max-width: 100%;

        margin-top: 4px;

        text-align: left;
    }


    /* ADDRESS */

    .fc-account-address-item {

        padding: 14px;
    }


    .fc-account-address-actions {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .fc-account-address-actions a,
    .fc-account-address-actions button {

        width: 100%;
    }


    .fc-account-address-form-actions {

        flex-direction: column;

        align-items: stretch;
    }


    .fc-account-address-form-actions
    .fc-account-primary-button,
    .fc-account-address-form-actions
    .fc-account-secondary-button {

        width: 100%;
    }


    /* PASSWORD */

    .fc-account-password-field input {

        min-height: 45px;

        font-size: 14px;
    }


    .fc-account-password-toggle {

        right: 5px;

        width: 34px;
        height: 34px;
    }


    .fc-account-forgot-password {

        justify-content: center;

        text-align: center;
    }


    /* LOGOUT */

    .fc-account-logout-area {

        margin-top: 22px;
    }


    .fc-account-logout-button {

        width: 100%;

        max-width: none;
    }
}


/* =====================================================
   VERY SMALL MOBILE — 380
===================================================== */

@media (max-width: 380px) {

    .fc-account-page {

        padding-left: 8px;
        padding-right: 8px;
    }


    .fc-account-card-top {

        padding-left: 9px !important;

        padding-right: 39px !important;
    }


    .fc-account-card-icon {

        width: 36px !important;
        height: 36px !important;

        margin-right: 8px !important;
    }


    .fc-account-card-top::before {

        font-size: 12px;
    }


    .fc-account-card-top::after {

        right: 13px;

        width: 6px;
        height: 6px;
    }


    .fc-account-order-item {

        display: flex;

        flex-direction: column;

        align-items: stretch;
    }


    .fc-account-order-product {

        width: 100%;
    }


    .fc-account-order-action {

        width: 100%;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .fc-account-page *,
    .fc-account-page *::before,
    .fc-account-page *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }
}







/* =====================================================
   ACCOUNT DETAILS — EDIT BUTTON
===================================================== */

.fc-account-details-edit-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: 100%;
    margin-top: 18px;
}


/* Edit Details */

.fc-account-edit-details {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 132px;
    min-height: 44px;

    margin: 0 !important;
    padding: 10px 17px !important;

    box-sizing: border-box;

    border: 1px solid #0f513f !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #0f513f !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center;
    text-decoration: none !important;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}


.fc-account-edit-details:hover {
    background: #0f513f !important;
    border-color: #0f513f !important;
    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 6px 16px rgba(15, 81, 63, .14);
}


.fc-account-edit-details:active {
    transform: translateY(0);

    box-shadow: none;
}


.fc-account-edit-details:focus,
.fc-account-edit-details:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(15, 81, 63, .12);
}


/* =====================================================
   ACCOUNT DETAILS — EDIT FORM ACTIONS
===================================================== */

.fc-account-details-edit-panel
.fc-account-form-actions {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    margin-top: 22px;

}


/* -----------------------------------------------------
   SAVE CHANGES
----------------------------------------------------- */

.fc-account-details-edit-panel
.fc-account-primary-button {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 142px;
    min-height: 45px;

    margin: 0 !important;
    padding: 10px 18px !important;

    box-sizing: border-box;

    border: 1px solid #0f513f !important;
    border-radius: 10px !important;

    background: #0f513f !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 5px 14px rgba(15, 81, 63, .12);

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.fc-account-details-edit-panel
.fc-account-primary-button:hover {

    background: #0b4032 !important;
    border-color: #0b4032 !important;

    color: #ffffff !important;

    transform: translateY(-1px);

    box-shadow:
        0 7px 18px rgba(15, 81, 63, .17);
}


.fc-account-details-edit-panel
.fc-account-primary-button:active {

    transform: translateY(0);

    box-shadow:
        0 3px 8px rgba(15, 81, 63, .10);
}


.fc-account-details-edit-panel
.fc-account-primary-button:focus,
.fc-account-details-edit-panel
.fc-account-primary-button:focus-visible {

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(15, 81, 63, .13),
        0 5px 14px rgba(15, 81, 63, .12);
}


/* -----------------------------------------------------
   CANCEL
----------------------------------------------------- */

.fc-account-details-edit-panel
.fc-account-cancel-details {

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    min-width: 92px;
    min-height: 45px;

    margin: 0 !important;
    padding: 10px 17px !important;

    box-sizing: border-box;

    border: 1px solid #d5ded9 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    color: #53615a !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.fc-account-details-edit-panel
.fc-account-cancel-details:hover {

    background: #f7f9f8 !important;
    border-color: #b9c6bf !important;

    color: #34483d !important;

    transform: translateY(-1px);
}


.fc-account-details-edit-panel
.fc-account-cancel-details:active {

    background: #f0f4f2 !important;

    transform: translateY(0);
}


.fc-account-details-edit-panel
.fc-account-cancel-details:focus,
.fc-account-details-edit-panel
.fc-account-cancel-details:focus-visible {

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(83, 97, 90, .10);
}


/* =====================================================
   ACCOUNT DETAILS — ERROR NOTICE
===================================================== */

.fc-account-notice-error {

    display: flex !important;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    margin: 0 0 18px !important;

    padding: 14px 16px !important;

    box-sizing: border-box;

    border: 1px solid #f0b8c0 !important;
    border-radius: 11px !important;

    background: #fff4f5 !important;

    color: #b42318 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    box-shadow:
        0 3px 10px rgba(180, 35, 24, .05);
}


/* Error text */

.fc-account-notice-error strong,
.fc-account-notice-error span,
.fc-account-notice-error p {

    color: #b42318 !important;
}


/* =====================================================
   ACCOUNT DETAILS — SUCCESS NOTICE
===================================================== */

.fc-account-notice-success {

    display: flex !important;

    align-items: flex-start;

    gap: 10px;

    width: 100%;

    margin: 0 0 18px !important;

    padding: 14px 16px !important;

    box-sizing: border-box;

    border: 1px solid #b9dfcf !important;
    border-radius: 11px !important;

    background: #f0faf5 !important;

    color: #08704f !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .fc-account-details-edit-action {

        justify-content: stretch;

        margin-top: 14px;

    }


    .fc-account-edit-details {

        width: 100%;

        min-height: 43px;

        font-size: 13px !important;

    }


    .fc-account-details-edit-panel
    .fc-account-form-actions {

        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        margin-top: 18px;

    }


    .fc-account-details-edit-panel
    .fc-account-primary-button,

    .fc-account-details-edit-panel
    .fc-account-cancel-details {

        width: 100%;

        min-height: 44px;

    }


    .fc-account-notice-error,
    .fc-account-notice-success {

        padding: 13px 14px !important;

        font-size: 12.5px !important;

        border-radius: 10px !important;

    }

}






/* =====================================================
   ADDRESS FORM — SAVE / UPDATE BUTTON
===================================================== */

.fc-account-address-form
.fc-account-address-form-actions
.fc-account-primary-button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 48px !important;

    padding: 12px 24px !important;

    border: 1px solid #0f513f !important;
    border-radius: 10px !important;

    background: #0f513f !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    box-shadow:
        0 4px 12px rgba(15, 81, 63, 0.12) !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}


/* =====================================================
   HOVER
===================================================== */

.fc-account-address-form
.fc-account-address-form-actions
.fc-account-primary-button:hover {

    background: #0b4435 !important;

    border-color: #0b4435 !important;

    color: #ffffff !important;

    box-shadow:
        0 6px 16px rgba(15, 81, 63, 0.18) !important;

    transform: translateY(-1px) !important;
}


/* =====================================================
   ACTIVE
===================================================== */

.fc-account-address-form
.fc-account-address-form-actions
.fc-account-primary-button:active {

    background: #08392d !important;

    border-color: #08392d !important;

    color: #ffffff !important;

    box-shadow:
        0 2px 6px rgba(15, 81, 63, 0.12) !important;

    transform: translateY(0) !important;
}


/* =====================================================
   FOCUS
===================================================== */

.fc-account-address-form
.fc-account-address-form-actions
.fc-account-primary-button:focus,
.fc-account-address-form
.fc-account-address-form-actions
.fc-account-primary-button:focus-visible {

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(15, 81, 63, 0.14),
        0 4px 12px rgba(15, 81, 63, 0.12) !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .fc-account-address-form
    .fc-account-address-form-actions
    .fc-account-primary-button {

        width: 100% !important;

        min-height: 46px !important;

        padding: 11px 18px !important;

        border-radius: 9px !important;

        font-size: 14px !important;
    }

}




/* =====================================================
   ACCOUNT PASSWORD — CHANGE PASSWORD BUTTON
===================================================== */

.fc-account-password-form
.fc-account-primary-button {

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 160px !important;
    min-height: 46px !important;

    margin: 8px 0 0 !important;
    padding: 11px 22px !important;

    box-sizing: border-box !important;

    border: 1px solid #0f513f !important;
    border-radius: 10px !important;

    background: #0f513f !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    text-decoration: none !important;

    cursor: pointer !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    box-shadow:
        0 5px 14px rgba(15, 81, 63, 0.12) !important;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}


/* =====================================================
   HOVER
===================================================== */

.fc-account-password-form
.fc-account-primary-button:hover {

    background: #0b4032 !important;
    border-color: #0b4032 !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 7px 18px rgba(15, 81, 63, 0.18) !important;
}


/* =====================================================
   ACTIVE
===================================================== */

.fc-account-password-form
.fc-account-primary-button:active {

    background: #08392d !important;
    border-color: #08392d !important;

    transform: translateY(0) !important;

    box-shadow:
        0 3px 8px rgba(15, 81, 63, 0.12) !important;
}


/* =====================================================
   FOCUS
===================================================== */

.fc-account-password-form
.fc-account-primary-button:focus,
.fc-account-password-form
.fc-account-primary-button:focus-visible {

    outline: none !important;

    box-shadow:
        0 0 0 3px rgba(15, 81, 63, 0.13),
        0 5px 14px rgba(15, 81, 63, 0.12) !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .fc-account-password-form
    .fc-account-primary-button {

        width: 100% !important;

        min-height: 45px !important;

        margin-top: 6px !important;

        padding: 11px 18px !important;

        border-radius: 9px !important;

        font-size: 14px !important;
    }

}