/* =============================================
   Wooden Sheds – My Account Redesign
   ============================================= */

:root {
    --ws-ma-green: var(--ws-primary, #2d7a3a);
    --ws-ma-green-light: #e8f5e9;
    --ws-ma-dark: var(--ws-ink, #1a1a1a);
    --ws-ma-text: var(--ws-ink, #333);
    --ws-ma-muted: var(--ws-muted, #666);
    --ws-ma-border: var(--ws-border, #e5e5e0);
    --ws-ma-bg: var(--ws-surface, #f8f8f6);
    --ws-ma-radius: 12px;
    --ws-ma-max: 1000px;
}

/* ── Layout: switch from sidebar to stacked ── */

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
    float: none !important;
    width: 100% !important;
    max-width: var(--ws-ma-max);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Navigation → Horizontal Tabs ── */

.woocommerce-account .woocommerce-MyAccount-navigation,
.the_content_wrapper .woocommerce-MyAccount-navigation {
    margin-bottom: 32px !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 8px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 14px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.3 !important;
    color: var(--ws-ma-text) !important;
    text-decoration: none !important;
    background: var(--ws-ma-bg) !important;
    border: 1px solid var(--ws-ma-border) !important;
    border-radius: 10px !important;
    margin-bottom: 0 !important;
    transition: border-color 0.2s, background 0.2s;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    border-color: var(--ws-ma-green) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"] {
    background: var(--ws-ma-green-light) !important;
    border-color: var(--ws-ma-green) !important;
    color: var(--ws-ma-green) !important;
    font-weight: 600 !important;
}

/* ── Icons before nav items ── */

.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    flex-shrink: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"]::before {
    opacity: 0.8;
}

/* Icon per tab — using inline SVG data URIs */
.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--downloads a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--edit-address a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--edit-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'/%3E%3Cline x1='1' y1='10' x2='23' y2='10'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") !important;
}

.woocommerce-MyAccount-navigation-link--trade-account a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16'/%3E%3C/svg%3E") !important;
}

/* ── Content Area ── */

.woocommerce-account .woocommerce-MyAccount-content {
    background: #fff;
    border: 1px solid var(--ws-ma-border);
    border-radius: var(--ws-ma-radius);
    padding: 32px !important;
}

/* ── Dashboard welcome ── */

.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ws-ma-text);
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ws-ma-border);
}

/* ── Orders table ── */

.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table {
    border: 1px solid var(--ws-ma-border) !important;
    border-radius: var(--ws-ma-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.woocommerce-account table.woocommerce-orders-table thead th,
.woocommerce-account table.shop_table thead th {
    background: var(--ws-ma-bg) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--ws-ma-muted) !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--ws-ma-border) !important;
}

.woocommerce-account table.woocommerce-orders-table td,
.woocommerce-account table.shop_table td {
    padding: 16px !important;
    font-size: 14px !important;
    color: var(--ws-ma-text) !important;
    border-bottom: 1px solid #f0f0ee !important;
    vertical-align: middle !important;
}

.woocommerce-account table.woocommerce-orders-table tr:last-child td,
.woocommerce-account table.shop_table tr:last-child td {
    border-bottom: none !important;
}

/* Order status badges */
.woocommerce-account .woocommerce-orders-table__cell-order-status {
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Action buttons in orders */
.woocommerce-account table .woocommerce-button,
.woocommerce-account table .button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    background: var(--ws-ma-green) !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: background 0.2s !important;
}

.woocommerce-account table .woocommerce-button:hover,
.woocommerce-account table .button:hover {
    background: #245f2e !important;
}

/* ── Forms (edit account, edit address) ── */

.woocommerce-account .woocommerce-EditAccountForm,
.woocommerce-account .woocommerce-address-fields {
    max-width: 600px;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row {
    margin-bottom: 16px !important;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ws-ma-text) !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--ws-ma-border) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: border-color 0.2s !important;
    box-sizing: border-box !important;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus {
    border-color: var(--ws-ma-green) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(45, 122, 58, 0.12) !important;
}

/* Submit buttons */
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    background: var(--ws-ma-green) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}

.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
    background: #245f2e !important;
}

/* ── Addresses grid ── */

.woocommerce-account .woocommerce-MyAccount-content .addresses.col2-set,
.woocommerce-account .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    float: none !important;
    width: 100% !important;
    clear: both !important;
}

/* Kill all floats and widths on the address columns */
.woocommerce-account .woocommerce-MyAccount-content .addresses .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .addresses .u-column2,
.woocommerce-account .woocommerce-MyAccount-content .addresses .col-1,
.woocommerce-account .woocommerce-MyAccount-content .addresses .col-2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses > .woocommerce-Address,
.woocommerce-account .woocommerce-MyAccount-content .col2-set > .col-1,
.woocommerce-account .woocommerce-MyAccount-content .col2-set > .col-2,
.woocommerce .woocommerce-MyAccount-content .u-column1.woocommerce-Address,
.woocommerce .woocommerce-MyAccount-content .u-column2.woocommerce-Address {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: var(--ws-ma-bg) !important;
    border: 1px solid var(--ws-ma-border) !important;
    border-radius: var(--ws-ma-radius) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
}

/* Address header: title + edit link side by side */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address header.woocommerce-Address-title,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address .woocommerce-Address-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--ws-ma-border) !important;
}

/* Address heading size */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--ws-ma-dark) !important;
}

/* Edit link */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ws-ma-green) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Address text */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address address {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--ws-ma-text) !important;
    font-style: normal !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* ── Notices / Messages ── */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
    border-radius: 8px !important;
    border-left: 4px solid var(--ws-ma-green) !important;
    background: var(--ws-ma-green-light) !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
}

.woocommerce-account .woocommerce-error {
    border-radius: 8px !important;
    border-left: 4px solid #dc3545 !important;
    background: #fef2f2 !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    margin-bottom: 24px !important;
}

/* ── No orders / empty states ── */

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    text-align: center;
    padding: 32px 20px !important;
    background: var(--ws-ma-bg) !important;
    border: 1px dashed var(--ws-ma-border) !important;
    border-left: 1px dashed var(--ws-ma-border) !important;
    border-radius: var(--ws-ma-radius) !important;
    color: var(--ws-ma-muted) !important;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .woocommerce-Button {
    margin-top: 12px !important;
}

/* ── Responsive ── */

@media (max-width: 768px) {

    /* Force all theme wrappers to full viewport width */
    .woocommerce-account #Wrapper,
    .woocommerce-account #Content,
    .woocommerce-account .content_wrapper,
    .woocommerce-account .sections_group,
    .woocommerce-account .entry-content,
    .woocommerce-account .section_wrapper,
    .woocommerce-account .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-account .woocommerce {
        padding: 0 8px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation {
        margin-bottom: 20px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
        font-size: 11.5px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
        width: 22px !important;
        height: 22px !important;
        opacity: 0.6 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before,
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a[aria-current="page"]::before {
        opacity: 1 !important;
    }

    /* Logout item — span full width at bottom */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout {
        grid-column: 1 / -1 !important;
    }

    .woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a {
        flex-direction: row !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        background: #fff !important;
        border-color: #e0ddd8 !important;
        color: var(--ws-ma-muted) !important;
        font-size: 12px !important;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 16px !important;
        border-radius: 8px;
    }

    .woocommerce-account .woocommerce-Addresses,
    .woocommerce-account .woocommerce-MyAccount-content .u-columns,
    .woocommerce-account .woocommerce-MyAccount-content .col2-set,
    .woocommerce-account .woocommerce-MyAccount-content .addresses.col2-set,
    .woocommerce-account .woocommerce-MyAccount-content .u-columns.woocommerce-Addresses {
        grid-template-columns: 1fr !important;
    }

    .woocommerce-account table.woocommerce-orders-table thead {
        display: none !important;
    }

    .woocommerce-account table.woocommerce-orders-table tr {
        display: block !important;
        padding: 16px !important;
        border-bottom: 1px solid var(--ws-ma-border) !important;
    }

    .woocommerce-account table.woocommerce-orders-table td {
        display: flex !important;
        justify-content: space-between !important;
        padding: 6px 0 !important;
        border: none !important;
    }

    .woocommerce-account table.woocommerce-orders-table td::before {
        content: attr(data-title) !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: var(--ws-ma-muted) !important;
        text-transform: uppercase !important;
    }
}