.woocommerce-account .woocommerce {
display: flex !important;
flex-direction: row;
gap: 30px;
max-width: 1200px;
margin: 0 auto 100px auto;
padding: 20px;
} .woocommerce-account nav.woocommerce-MyAccount-navigation {
flex: 0 0 240px;
order: 1;
background: #ffffff;
border-radius: 12px;
border: 1px solid #e5e7eb;
padding: 0;
height: fit-content;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul {
list-style: none;
margin: 0;
padding: 8px;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li {
margin: 0 0 4px 0;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li:last-child {
margin-bottom: 0;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a {
display: block;
padding: 12px 16px;
color: #6b7280;
text-decoration: none;
font-size: 15px;
font-weight: 500;
border-radius: 8px;
transition: all 0.2s;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li a:hover {
background: #f9fafb;
color: #111827;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation ul li.is-active a {
background: #111827;
color: white;
} .woocommerce-account .woocommerce-MyAccount-content {
flex: 1;
order: 2;
background: white;
padding: 40px;
border-radius: 12px;
border: 1px solid #e5e7eb;
min-height: 400px;
}
.woocommerce-account .woocommerce-MyAccount-content h2 {
margin-top: 0;
margin-bottom: 24px;
font-size: 28px;
font-weight: 700;
color: #111827;
}
.woocommerce-account .woocommerce-MyAccount-content p {
line-height: 1.6;
color: #6b7280;
font-size: 15px;
margin-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content strong {
color: #111827;
}
.woocommerce-account .woocommerce-MyAccount-content a {
color: #111827;
text-decoration: underline;
font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
opacity: 0.7;
} .woocommerce-account table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
border: 1px solid #e5e7eb;
border-radius: 8px;
overflow: hidden;
}
.woocommerce-account table th {
background: #f9fafb;
color: #111827;
padding: 12px 16px;
text-align: left;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid #e5e7eb;
}
.woocommerce-account table td {
padding: 14px 16px;
border-bottom: 1px solid #f3f4f6;
color: #6b7280;
}
.woocommerce-account table tr:last-child td {
border-bottom: none;
}
.woocommerce-account table tr:hover {
background: #f9fafb;
} .woocommerce-account .woocommerce-MyAccount-content button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
background: #111827;
color: white;
padding: 12px 24px;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-content button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
background: #1f2937;
} .woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form textarea,
.woocommerce-account .woocommerce-MyAccount-content form select {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px 14px;
font-size: 15px;
transition: border-color 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-content form input:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus {
outline: none;
border-color: #111827;
}
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons>li#express-payment-method-ppcp-googlepay {
width: 252px !important;
}
div[data-block-name="woocommerce-paypal-payments/checkout-paylater-messages"] {
margin-top: 10px;
}
.woocommerce-thankyou-order-received {
text-align: center;
font-size: 22px;
padding-bottom: 11px;
}
.woocommerce-order {
margin-bottom: 100px;
padding-top: 30px;
}
.woocommerce-breadcrumb {
padding-top: 30px;
} @media (max-width: 768px) {
.woocommerce-account .woocommerce {
flex-direction: column;
padding: 15px;
margin: 20px auto;
}
.woocommerce-account nav.woocommerce-MyAccount-navigation {
width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content {
padding: 25px;
}
}