/* ==========================================================================
   Her Peptides — my account (profile.html)
   Depends on style.css (tokens, header/footer), shop.css (.crumbs, .shop-card,
   .shop-trust) and commerce.css (panels, buttons, fields, .quantity, notices).

   Markup is WooCommerce's own: .woocommerce-MyAccount-navigation / -content,
   the endpoint panels (dashboard, orders, view-order, track-order, wishlist,
   edit-address, payment-methods, edit-account), table.woocommerce-orders-table,
   .woocommerce-order-details, .woocommerce-customer-details, .woocommerce-Address,
   form.woocommerce-EditAccountForm and the logged-out #customer_login pair.
   Only the wrappers whose names start with .acc- are ours.

   The rewards, subscriptions and downloads sections of the design are not here:
   the account has no such endpoints, so the rules would style nothing.

   Loaded only on is_account_page(), after commerce.css — which matters, because
   several rules below have to out-specify woocommerce.css rather than merely
   follow it. See the note on .shop_table in commerce.css.
   ========================================================================== */

/* ================================ page head ================================ */

.acc-head-side {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.acc-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 11px;
    border: 1px solid #f7dbe8;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
}

.acc-chip i {
    display: grid;
    flex: none;
    width: 32px;
    height: 32px;
    place-content: center;
    border-radius: 50%;
    color: var(--pink);
    background: #fff;
    font-size: 16px;
    line-height: 1;
}

.acc-chip b {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.acc-chip span {
    display: block;
    margin-top: 1px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

/* the signed-in / signed-out flip is demo scaffolding — the WP build deletes it
   because WordPress decides which of the two templates renders */
.acc-viewswitch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 16px;
    padding: 4px;
    border: 1px solid #f2dbe4;
    border-radius: 30px;
    background: rgba(255, 255, 255, .8);
}

.acc-viewswitch button {
    padding: 6px 14px;
    border: 0;
    border-radius: 30px;
    color: #7c7276;
    background: none;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    transition: color .2s ease, background .2s ease;
}

.acc-viewswitch button.is-sel {
    color: #fff;
    background: var(--pink);
}

/* ============================ woo / bootstrap clash ============================ */

/* WooCommerce prints .col-1 / .col-2 on its address cards and on the two halves
   of #customer_login (my-account/form-login.php, my-account/my-address.php).
   Bootstrap's grid owns those same names — 8.33% and 16.67% wide — so without
   this reset the cards collapse to a couple of characters per line. Keep this
   rule in the WP build: Woo's markup does not change. */
.woocommerce-Addresses > .col-1,
.woocommerce-Addresses > .col-2,
#customer_login > .col-1,
#customer_login > .col-2 {
    flex: initial;
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* ================================== layout ================================== */

.woocommerce-MyAccount-navigation {
    position: sticky;
    top: 96px;
}

.woocommerce-MyAccount-content {
    min-width: 0;
}

/* -------------------------------- identity -------------------------------- */

.acc-id {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: linear-gradient(150deg, #fdeef4 0%, #fff 72%);
}

.acc-avatar {
    position: relative;
    flex: none;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--pink-tint);
    box-shadow: 0 6px 16px rgba(200, 130, 165, .22);
}

.acc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-id-body {
    min-width: 0;
}

.acc-id-name {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-id-mail {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 3px 9px;
    border-radius: 30px;
    color: #8a5a1f;
    background: linear-gradient(120deg, #fbe6c4, #f7d79f);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.acc-tier i {
    font-size: 12px;
}

/* ------------------------------ navigation list ------------------------------ */

.woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 8px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fff;
    list-style: none;
}

.woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #574f52;
    font-size: 13.5px;
    font-weight: 600;
    transition: color .2s ease, background .2s ease;
}

.woocommerce-MyAccount-navigation li a i {
    flex: none;
    color: #b39aa6;
    font-size: 18px;
    line-height: 1;
    transition: color .2s ease;
}

/* :not() keeps this off .acc-nav-count — it is a span too, and this selector
   out-specifies its own flex: none, which stretches the badge and clips the
   label on a narrow rail */
.woocommerce-MyAccount-navigation li a span:not(.acc-nav-count) {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.woocommerce-MyAccount-navigation li a:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.woocommerce-MyAccount-navigation li a:hover i {
    color: var(--pink);
}

.woocommerce-MyAccount-navigation li.is-active a {
    color: #fff;
    background: var(--pink);
    box-shadow: 0 6px 16px rgba(224, 92, 150, .26);
}

.woocommerce-MyAccount-navigation li.is-active a i,
.woocommerce-MyAccount-navigation li.is-active a .acc-nav-count {
    color: #fff;
}

.woocommerce-MyAccount-navigation li.is-active a .acc-nav-count {
    background: rgba(255, 255, 255, .24);
}

.acc-nav-count {
    display: grid;
    flex: none;
    min-width: 20px;
    height: 20px;
    place-content: center;
    border-radius: 30px;
    color: var(--pink-dark);
    background: var(--pink-tint);
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    transition: color .2s ease, background .2s ease;
}

.woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #f7ecf1;
}

.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: #a2969b;
}

/* --------------------------------- nav help --------------------------------- */

.acc-nav-help {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fdf9fb;
}

.acc-nav-help h3 {
    margin: 0 0 4px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
}

.acc-nav-help p {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.6;
}

/* ================================== panels ================================== */

/*
 * `.acc-panel` is also the navigation drawer's accordion body, where it is a
 * grid whose `grid-template-rows: 0fr` is what keeps a closed sub-menu closed.
 * Scoping to the account content leaves the drawer alone — an unscoped
 * `display: block` here springs every drawer accordion open on these pages.
 */
.woocommerce-MyAccount-content .acc-panel {
    display: block;
}

.woocommerce-MyAccount-content .acc-panel[hidden] {
    display: none;
}

.acc-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

/* the title block takes the slack so the actions stay on the same row */
.acc-panel-head > div:first-child {
    flex: 1 1 320px;
    min-width: 0;
}

.acc-panel-head h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.2;
}

.acc-panel-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.acc-panel-head .acc-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-sub-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}

/* a sub-heading that follows a field grid needs air above it */
.woocommerce-MyAccount-content .cm-fields + .acc-sub-head {
    margin-top: 26px;
}

.acc-sub-head h3 {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
}

.acc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--pink-dark);
    font-size: 13px;
    font-weight: 600;
}

.acc-back:hover {
    color: var(--pink);
}

/* ================================ stat tiles ================================ */

.acc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.acc-stat {
    padding: 15px 16px 16px;
    border: 1px solid #f7e7ee;
    border-radius: 14px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.acc-stat:hover {
    border-color: var(--pink-soft);
    box-shadow: 0 10px 24px rgba(200, 130, 165, .1);
}

.acc-stat i {
    display: grid;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    place-content: center;
    border-radius: 10px;
    color: var(--pink);
    background: var(--pink-tint);
    font-size: 17px;
    line-height: 1;
}

.acc-stat b {
    display: block;
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
}

/*
 * `>` matters: the "total spent" tile holds wc_price() markup, which nests two
 * more <span>s inside the <b>. A descendant rule turned the currency symbol
 * into its own 12px muted line above the amount.
 */
.acc-stat > span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}

.acc-stat b .woocommerce-Price-amount,
.acc-stat b .woocommerce-Price-currencySymbol {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
}

.acc-stat small {
    display: block;
    margin-top: 7px;
    color: #3d8f68;
    font-size: 11.5px;
    font-weight: 600;
}

/* =============================== status pills =============================== */

.acc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 30px;
    background: #f4eef1;
    color: #6d6367;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.acc-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.acc-status--processing {
    color: #a3701a;
    background: #fdf3e2;
}

.acc-status--completed {
    color: #3d8f68;
    background: #e9f6ef;
}

.acc-status--on-hold {
    color: #7a6cae;
    background: #f0edfa;
}

.acc-status--cancelled,
.acc-status--failed {
    color: #c8484c;
    background: #fdeeee;
}

.acc-status--refunded {
    color: #4d7fa8;
    background: #eaf3fa;
}

.acc-status--pending {
    color: #8a7f83;
    background: #f4eef1;
}

.acc-status--active {
    color: #3d8f68;
    background: #e9f6ef;
}

/* ================================= toolbar ================================= */

.acc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.acc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-filters a,
.acc-filters button {
    padding: 7px 13px;
    border: 1px solid #f2dbe4;
    border-radius: 30px;
    color: #6d6367;
    background: #fff;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.acc-filters a:hover,
.acc-filters button:hover {
    border-color: var(--pink-soft);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.acc-filters a.is-sel,
.acc-filters button.is-sel {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
}

.acc-filters a span,
.acc-filters button span {
    opacity: .7;
    font-weight: 500;
}

.acc-search {
    position: relative;
    flex: 0 1 280px;
}

.acc-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #b8adb2;
    font-size: 16px;
    line-height: 1;
    transform: translateY(-50%);
}

/* `.profile-page input.` is what it takes to beat the shared field padding in
   commerce.css; without it the magnifier sits on top of the placeholder. */
.profile-page .acc-search input.input-text,
.acc-search .input-text {
    padding-left: 38px;
}

/* ================================== tables ================================== */

/*
 * Every selector in this block carries the `.woocommerce table.shop_table`
 * prefix, because that is what woocommerce.css and commerce.css both use — a
 * bare `.woocommerce-orders-table` is a class shallower and loses outright. The
 * symptom is silent: the rules are there in devtools, greyed out, and the table
 * renders with the shared cart-style furniture instead of the account's card.
 */
.woocommerce table.shop_table.woocommerce-orders-table,
.woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods,
.woocommerce-orders-table,
.woocommerce-MyAccount-paymentMethods {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fff;
    border-spacing: 0;
    overflow: hidden;
    font-size: 14px;
}

.acc-table-wrap {
    overflow-x: auto;
    border-radius: 16px;
}

.woocommerce table.shop_table.woocommerce-orders-table thead th,
.woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods thead th,
.woocommerce-orders-table thead th,
.woocommerce-MyAccount-paymentMethods thead th {
    padding: 13px 16px;
    border-bottom: 1px solid #f2dbe4;
    background: #fdf9fb;
    color: #6d6367;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.woocommerce table.shop_table.woocommerce-orders-table tbody td,
.woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods tbody td,
.woocommerce-orders-table tbody td,
.woocommerce-MyAccount-paymentMethods tbody td {
    padding: 15px 16px;
    border-bottom: 1px solid #f7ecf1;
    vertical-align: middle;
}

/*
 * The order-number cell is a <th scope="row">, which is correct markup and is
 * what core prints — but commerce.css dresses every `shop_table th` as a column
 * header, so without this the product names came out uppercase, letter-spaced
 * and 11px. Matching `.woocommerce table.shop_table th` selector for selector
 * is what it takes to win; see the note in commerce.css.
 */
.woocommerce table.shop_table.woocommerce-orders-table tbody th,
.woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods tbody th {
    padding: 15px 16px;
    border-bottom: 1px solid #f7ecf1;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    vertical-align: middle;
}

.woocommerce table.shop_table.woocommerce-orders-table tbody tr:last-child td,
.woocommerce table.shop_table.woocommerce-orders-table tbody tr:last-child th,
.woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods tbody tr:last-child td,
.woocommerce-orders-table tbody tr:last-child td,
.woocommerce-orders-table tbody tr:last-child th,
.woocommerce-MyAccount-paymentMethods tbody tr:last-child td {
    border-bottom: 0;
}

.woocommerce-orders-table tbody tr:hover {
    background: #fffafc;
}

/* ------------------------------ order number ------------------------------ */

.acc-order-no {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-thumbs {
    display: flex;
    flex: none;
}

.acc-thumbs img {
    width: 38px;
    height: 38px;
    padding: 4px;
    border: 1px solid #f7e7ee;
    border-radius: 9px;
    background: linear-gradient(170deg, #fdeaf2 0%, #fbdfe9 58%, #f7d3e1 100%);
    object-fit: contain;
}

.acc-thumbs img + img {
    margin-left: -12px;
}

.acc-thumbs span {
    display: grid;
    width: 38px;
    height: 38px;
    margin-left: -12px;
    place-content: center;
    border: 1px solid #f7e7ee;
    border-radius: 9px;
    color: var(--pink-dark);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.acc-order-no a {
    display: block;
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
}

.acc-order-no a:hover {
    color: var(--pink-dark);
}

.acc-order-no small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.woocommerce-orders-table__cell-order-date {
    white-space: nowrap;
}

.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount {
    font-size: 14.5px;
    font-weight: 700;
}

.woocommerce-orders-table__cell-order-total small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

/* -------------------------------- row actions -------------------------------- */

.woocommerce-orders-table__cell-order-actions,
.acc-row-actions {
    text-align: right;
    white-space: nowrap;
}

.acc-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #eedbe4;
    border-radius: 8px;
    color: var(--pink-dark);
    background: #fff;
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.acc-mini + .acc-mini {
    margin-left: 6px;
}

.acc-mini:hover {
    border-color: var(--pink);
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.acc-mini i {
    font-size: 15px;
}

.acc-mini--danger {
    color: #a95055;
}

.acc-mini--danger:hover {
    border-color: #e8b6b8;
    color: #c8484c;
    background: #fdf3f3;
}

.acc-mini--solid {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
}

.acc-mini--solid:hover {
    border-color: var(--pink-dark);
    color: #fff;
    background: var(--pink-dark);
}

/* ================================ pagination ================================ */

.woocommerce-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

.woocommerce-pagination .acc-page-info {
    color: var(--muted);
    font-size: 12.5px;
}

.woocommerce-pagination .acc-page-links {
    display: flex;
    gap: 8px;
}

/* ============================== order tracker ============================== */

.acc-track {
    margin: 0 0 20px;
    padding: 20px 22px 22px;
    border: 1px solid #f7e7ee;
    border-radius: 18px;
    background: linear-gradient(140deg, #fdf5f8, #fff 62%);
}

.acc-track-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.acc-track-top h3 {
    margin: 0 0 3px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
}

.acc-track-top p {
    margin: 0;
    color: var(--muted);
    font-size: 12.5px;
}

.acc-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-steps li {
    position: relative;
    padding-top: 30px;
    color: #a2969b;
    font-size: 12px;
    font-weight: 600;
}

.acc-steps li::before {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 22px;
    height: 22px;
    place-content: center;
    border: 1.5px solid #eed7e2;
    border-radius: 50%;
    background: #fff;
    color: #c9b8c0;
    font-family: icons;
    font-size: 12px;
    content: "\f47d"; /* tick-circle */
}

/* the connector starts after the dot and stops short of the next one */
.acc-steps li::after {
    position: absolute;
    top: 10px;
    right: 6px;
    left: 30px;
    height: 2px;
    border-radius: 2px;
    background: #f4e2ea;
    content: "";
}

.acc-steps li:last-child::after {
    display: none;
}

.acc-steps li.is-done {
    color: #574f52;
}

.acc-steps li.is-done::before {
    border-color: var(--pink);
    color: #fff;
    background: var(--pink);
}

.acc-steps li.is-done::after {
    background: var(--pink-soft);
}

.acc-steps li.is-current {
    color: var(--pink-dark);
}

.acc-steps li.is-current::before {
    border-color: var(--pink);
    color: var(--pink);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(224, 92, 150, .14);
}

.acc-steps li span {
    display: block;
    margin-top: 3px;
    color: #a2969b;
    font-size: 11px;
    font-weight: 500;
}

/* ============================== two-up columns ============================== */

.acc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.acc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.acc-card {
    padding: 18px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fff;
}

.acc-card h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
}

.acc-card p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

.acc-card--tint {
    background: #fdf9fb;
}

/* ============================= list of key/values ============================= */

.acc-kv {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-kv li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    font-size: 13px;
}

.acc-kv span {
    color: var(--muted);
    font-weight: 500;
}

.acc-kv strong {
    color: var(--ink);
    font-weight: 600;
    text-align: right;
}

/* ================================ addresses ================================ */

.woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* The `> .col-1` gutter reset above zeroes side padding at (0,2,0), so the card's
   own padding has to be written at the same weight — and later — to survive. */
.woocommerce-Addresses > .woocommerce-Address {
    padding: 18px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fff;
}

.woocommerce-Address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* woocommerce.css floats these cards and clearfixes the header with
   `.woocommerce-account .addresses .title::before/::after { display: table }`.
   Under `display: flex` those two pseudos become real flex items, so
   space-between spreads four items instead of two and the heading drifts into
   the middle of the card. */
.woocommerce-account .addresses .woocommerce-Address-title::before,
.woocommerce-account .addresses .woocommerce-Address-title::after {
    display: none;
}

.woocommerce-Address-title h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 700;
}

.woocommerce-Address-title h3 i {
    color: var(--pink);
    font-size: 17px;
}

.woocommerce-Address address {
    margin: 0;
    color: #574f52;
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.75;
}

.acc-address-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #f4e2ea;
    color: var(--muted);
    font-size: 12.5px;
}

.acc-address-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.acc-address-meta i {
    color: #b39aa6;
    font-size: 14px;
}

.acc-default-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 30px;
    color: #3d8f68;
    background: #e9f6ef;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.woocommerce-address-fields {
    margin-top: 16px;
}

.woocommerce-address-fields[hidden] {
    display: none;
}

.woocommerce-address-fields .acc-form-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* ============================== order details ============================== */

.woocommerce-order-details,
.woocommerce-customer-details {
    margin-top: 26px;
}

/* Core prints these section headings as <h2>, which lands on the page's display
   serif and reads louder than the panel's own title. They are sub-headings here,
   so they take .acc-sub-head h3's scale. */
.woocommerce-MyAccount-content .woocommerce-order-details__title,
.woocommerce-MyAccount-content .woocommerce-column__title,
.woocommerce-MyAccount-content .woocommerce-customer-details h2 {
    margin: 0 0 14px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.order_details,
.woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.order_details thead th {
    padding: 0 0 12px;
    border-bottom: 1px solid #f2dbe4;
    color: #6d6367;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-align: left;
    text-transform: uppercase;
}

.order_details thead th:last-child,
.order_details tbody td.woocommerce-table__product-total,
.order_details tfoot td {
    text-align: right;
}

.order_details tbody td {
    padding: 14px 0;
    border-bottom: 1px solid #f7ecf1;
    vertical-align: top;
}

/* The totals labels are sentence case. `.woocommerce table.shop_table th` in
   commerce.css is (0,2,2) and uppercases every th in the table, so the reset has
   to carry the same prefix or it silently loses. */
.order_details tfoot th,
.woocommerce table.shop_table.order_details tfoot th {
    padding: 11px 0;
    border-bottom: 1px solid #f7ecf1;
    color: #6d6367;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.order_details tfoot td {
    padding: 11px 0;
    border-bottom: 1px solid #f7ecf1;
}

.order_details tfoot tr:last-child th,
.order_details tfoot tr:last-child td {
    padding-top: 14px;
    border-bottom: 0;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
}

.order_details tfoot tr:last-child .woocommerce-Price-amount {
    font-size: 20px;
}

/* Core's customer-details block prints the same .col-1 / .col-2 pair as the
   address book when an order has a separate shipping address, so it needs the
   same escape from Bootstrap's grid. */
.woocommerce-columns--addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.woocommerce-columns--addresses > .col-1,
.woocommerce-columns--addresses > .col-2 {
    flex: initial;
    width: auto;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* woocommerce.css dresses this at `.woocommerce .woocommerce-customer-details
   address` (0,2,1) — a 5px-radius box with a heavier bottom border — so the
   card version has to match that prefix. */
.woocommerce-customer-details address,
.woocommerce .woocommerce-customer-details address {
    margin: 0;
    padding: 16px 18px;
    border-bottom-width: 1px;
    border: 1px solid #f7e7ee;
    border-radius: 16px;
    background: #fff;
    color: #574f52;
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.75;
}

.woocommerce-customer-details address p {
    margin: 8px 0 0;
}

/* The line-item row (.acc-item) lives in commerce.css: woocommerce/order/
   order-details-item.php also renders on the order-received page, where
   profile.css is not loaded. */

/* ------------------------------- order notes ------------------------------- */

.woocommerce-OrderUpdates {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-OrderUpdates li {
    position: relative;
    padding: 0 0 16px 24px;
}

.woocommerce-OrderUpdates li::before {
    position: absolute;
    top: 5px;
    left: 0;
    width: 10px;
    height: 10px;
    border: 2px solid var(--pink);
    border-radius: 50%;
    background: #fff;
    content: "";
}

.woocommerce-OrderUpdates li::after {
    position: absolute;
    top: 18px;
    bottom: 0;
    left: 4px;
    width: 2px;
    background: #f4e2ea;
    content: "";
}

.woocommerce-OrderUpdates li:last-child {
    padding-bottom: 0;
}

.woocommerce-OrderUpdates li:last-child::after {
    display: none;
}

.woocommerce-OrderUpdates .woocommerce-OrderUpdate-meta {
    display: block;
    color: #a2969b;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.woocommerce-OrderUpdates .woocommerce-OrderUpdate-description {
    margin: 3px 0 0;
    color: #574f52;
    font-size: 13px;
    line-height: 1.6;
}

/* ================================= wishlist ================================= */

.wishlist_table tr {
    transition: opacity .25s ease, transform .25s ease;
}

.wishlist_table tr.is-removing {
    opacity: 0;
    transform: translateX(-14px);
}

.wishlist_table .product-thumbnail img {
    width: 62px;
    height: 62px;
    padding: 5px;
    border: 1px solid #f7e7ee;
    border-radius: 12px;
    background: linear-gradient(170deg, #fdeaf2 0%, #fbdfe9 58%, #f7d3e1 100%);
    object-fit: contain;
}

.wishlist_table .product-name a {
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}

.wishlist_table .product-name a:hover {
    color: var(--pink-dark);
}

.wishlist_table .product-name small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.wishlist_table .product-price {
    font-weight: 700;
    white-space: nowrap;
}

.wishlist_table .product-stock-status {
    font-size: 12.5px;
    font-weight: 600;
}

.acc-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 12.5px;
}

.acc-share a {
    display: grid;
    width: 32px;
    height: 32px;
    place-content: center;
    border: 1px solid #f2dbe4;
    border-radius: 50%;
    color: #7a7075;
    background: #fff;
    font-size: 15px;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.acc-share a:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: var(--pink-tint);
}

/* ============================== payment methods ============================== */

.acc-card-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-card-brand i {
    display: grid;
    flex: none;
    width: 44px;
    height: 30px;
    place-content: center;
    border: 1px solid #eedbe4;
    border-radius: 6px;
    color: #6f6569;
    background: #fff;
    font-size: 17px;
    line-height: 1;
}

.acc-card-brand strong {
    display: block;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.acc-card-brand small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 500;
}

.acc-expired {
    color: #c8484c;
    font-weight: 600;
}

/* ============================== account details ============================== */

.woocommerce-EditAccountForm fieldset {
    margin: 0 0 22px;
    padding: 0;
    border: 0;
}

.woocommerce-EditAccountForm legend,
.acc-legend {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0 0 10px;
    border-bottom: 1px solid #f7ecf1;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
}

.woocommerce-EditAccountForm .acc-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

/* --------------------------- password + strength --------------------------- */

.acc-pass-wrap {
    position: relative;
}

/* same reason as .acc-search: the shared field padding is a class deeper */
.profile-page .acc-pass-wrap input.input-text,
.acc-pass-wrap .input-text {
    padding-right: 44px;
}

/*
 * The show/hide eye is WooCommerce's own: its JS wraps every password field in
 * `.password-input` and injects `button.show-password-input`. The styling for
 * it ships in woocommerce-layout.css, which this theme dequeues — so without
 * these rules it renders as a bare 2px dash under the field. Using core's
 * button rather than a second one of our own keeps the toggling, the
 * aria-label swap and the no-JS fallback core's problem.
 */
.profile-page .password-input {
    display: block;
    position: relative;
}

.profile-page .show-password-input {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 32px;
    height: 32px;
    place-content: center;
    border: 0;
    border-radius: 8px;
    color: #a2969b;
    background: none;
    padding: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .2s ease, background .2s ease;
}

.profile-page .show-password-input::before {
    font-family: icons;
    font-size: 17px;
    line-height: 1;
    content: "\f25f"; /* eye */
}

.profile-page .show-password-input.display-password::before {
    content: "\f25e"; /* eye-slash */
}

.profile-page .show-password-input:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.acc-pass-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    width: 32px;
    height: 32px;
    place-content: center;
    border: 0;
    border-radius: 8px;
    color: #a2969b;
    background: none;
    font-size: 17px;
    transform: translateY(-50%);
    transition: color .2s ease, background .2s ease;
}

.acc-pass-toggle:hover {
    color: var(--pink-dark);
    background: var(--pink-tint);
}

.woocommerce-password-strength {
    display: block;
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 8px;
    background: #f4eef1;
    color: #6d6367;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
    background: #fdeeee;
    color: #c8484c;
}

.woocommerce-password-strength.good {
    background: #fdf3e2;
    color: #a3701a;
}

.woocommerce-password-strength.strong {
    background: #e9f6ef;
    color: #3d8f68;
}

.woocommerce-password-hint {
    display: block;
    margin-top: 6px;
    color: #a2969b;
    font-size: 11.5px;
    line-height: 1.55;
}

/* ============================== logged-out view ============================== */

.acc-guest[hidden] {
    display: none;
}

#customer_login {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

#customer_login h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

#customer_login .acc-form-intro {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}

#customer_login .form-row + .form-row {
    margin-top: 14px;
}

/* With registration off there is one card, and a half-width card pinned to the
   left of a 1296px row reads as a layout bug rather than a choice. */
.acc-guest--solo #customer_login {
    max-width: 520px;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1fr);
}

/* woocommerce.css boxes both forms — `.woocommerce form.login` and
   `form.register` (0,2,1), a 5px-radius outline with its own padding and 2em
   margins. Inside .cm-panel that draws a second card around the fields, so the
   reset has to carry the same prefix. */
.acc-guest .woocommerce-form-login,
.acc-guest .woocommerce-form-register,
.woocommerce .acc-guest form.login,
.woocommerce .acc-guest form.register {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

/* And it forces the remember-me label back to inline-block at
   `.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme`
   (0,3,0), which stacks the box above its text. */
.woocommerce .woocommerce-form-login .woocommerce-form-login__rememberme.cm-check {
    display: flex;
    align-items: center;
    width: auto;
}

.woocommerce-LostPassword {
    margin: 14px 0 0;
    font-size: 13.5px;
}

.woocommerce-LostPassword a {
    color: var(--pink-dark);
    font-weight: 600;
}

.woocommerce-LostPassword a:hover {
    text-decoration: underline;
}

.acc-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.acc-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 14px;
    color: #a2969b;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.acc-or::before,
.acc-or::after {
    flex: 1;
    height: 1px;
    background: #f2dbe4;
    content: "";
}

.acc-social {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.acc-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 12px;
    border: 1px solid #e6dade;
    border-radius: 10px;
    color: #3a3336;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.acc-social a:hover {
    border-color: #cfc2c8;
    box-shadow: 0 6px 16px rgba(120, 90, 105, .12);
}

.acc-benefits {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acc-benefits i {
    display: grid;
    flex: none;
    width: 36px;
    height: 36px;
    place-content: center;
    border-radius: 50%;
    color: var(--pink);
    background: #fff;
    font-size: 17px;
    line-height: 1;
}

.acc-benefits strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

.acc-benefits span {
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.55;
}

.woocommerce-ResetPassword[hidden] {
    display: none;
}

/* =============================== empty states =============================== */

.acc-empty {
    padding: 44px 26px 46px;
    border: 1px dashed var(--pink-soft);
    border-radius: 18px;
    background: #fdf7fa;
    text-align: center;
}

.acc-empty[hidden] {
    display: none;
}

.acc-empty i {
    display: grid;
    width: 68px;
    height: 68px;
    margin: 0 auto 16px;
    place-content: center;
    border-radius: 50%;
    color: var(--pink);
    background: #fff;
    font-size: 30px;
    line-height: 1;
    box-shadow: 0 10px 26px rgba(200, 130, 165, .16);
}

.acc-empty h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.acc-empty p {
    max-width: 340px;
    margin: 0 auto 20px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

/* =============================== recommended =============================== */

.acc-picks .shop-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ================================ responsive ================================ */

@media (max-width: 1199.98px) {
    .acc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acc-picks .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .woocommerce-MyAccount-navigation {
        position: static;
        margin-bottom: 22px;
    }

    /* the vertical rail becomes a swipeable strip above the content */
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        padding: 8px;
        scrollbar-width: none;
    }

    .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
        display: none;
    }

    .woocommerce-MyAccount-navigation li {
        flex: none;
    }

    .woocommerce-MyAccount-navigation li a {
        white-space: nowrap;
    }

    .woocommerce-MyAccount-navigation-link--customer-logout {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
        border-left: 1px solid #f7ecf1;
        padding-left: 6px;
    }

    .acc-nav-help {
        display: none;
    }

    .acc-earn,
    .acc-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acc-picks .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .acc-panel-head h2 {
        font-size: 21px;
    }

    .acc-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 10px;
    }

    .acc-grid,
    .acc-grid--3,
    .woocommerce-Addresses,
    #customer_login {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * Woo's shop_table_responsive: drop the header and let each cell label
     * itself from data-title, the same way the cart table does. `th` is in
     * every list because the order-number cell is a <th scope="row">, and the
     * `.woocommerce table.shop_table` prefix is there because the desktop cell
     * padding these rules replace comes from commerce.css at that specificity.
     */
    .woocommerce-orders-table thead,
    .woocommerce-MyAccount-paymentMethods thead,
    .wishlist_table thead {
        display: none;
    }

    .woocommerce-orders-table,
    .woocommerce-orders-table tbody,
    .woocommerce-orders-table tr,
    .woocommerce-orders-table td,
    .woocommerce-orders-table th,
    .woocommerce-MyAccount-paymentMethods,
    .woocommerce-MyAccount-paymentMethods tbody,
    .woocommerce-MyAccount-paymentMethods tr,
    .woocommerce-MyAccount-paymentMethods td,
    .woocommerce-MyAccount-paymentMethods th {
        display: block;
        width: 100%;
    }

    .woocommerce-orders-table tbody tr,
    .woocommerce-MyAccount-paymentMethods tbody tr {
        padding: 14px 15px;
        border-bottom: 1px solid #f7ecf1;
    }

    .woocommerce table.shop_table.woocommerce-orders-table tbody td,
    .woocommerce table.shop_table.woocommerce-orders-table tbody th,
    .woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods tbody td,
    .woocommerce table.shop_table.woocommerce-MyAccount-paymentMethods tbody th,
    .woocommerce-orders-table tbody td,
    .woocommerce-orders-table tbody th,
    .woocommerce-MyAccount-paymentMethods tbody td,
    .woocommerce-MyAccount-paymentMethods tbody th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 6px 0;
        border-bottom: 0;
        text-align: left;
    }

    .woocommerce-orders-table tbody td::before,
    .woocommerce-orders-table tbody th::before,
    .woocommerce-MyAccount-paymentMethods tbody td::before,
    .woocommerce-MyAccount-paymentMethods tbody th::before {
        flex: none;
        color: #6d6367;
        content: attr(data-title);
        font-size: 11.5px;
        font-weight: 600;
    }

    /* the first cell carries the product art — it keeps the full width */
    .woocommerce-orders-table tbody tr > :first-child::before,
    .woocommerce-MyAccount-paymentMethods tbody tr > :first-child::before {
        display: none;
    }

    .woocommerce-orders-table__cell-order-actions,
    .acc-row-actions {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        margin-top: 6px;
        padding-top: 10px !important;
        border-top: 1px dashed #f4e2ea !important;
    }

    .acc-mini + .acc-mini {
        margin-left: 0;
    }

    .woocommerce-orders-table__cell-order-actions .acc-mini,
    .acc-row-actions .acc-mini {
        margin: 2px 6px 2px 0;
    }

    .acc-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .acc-search {
        flex: 1 1 auto;
    }

    .acc-points-ring {
        margin: 0 auto;
    }

    .acc-earn,
    .acc-social,
    .acc-picks .shop-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * The order-details table keeps its two columns at phone width — a thumbnail,
     * a wrapping name and a short price still fit, and it is the only shape that
     * keeps each line item's price on the same line as the item. (Blocking the
     * cells drew a divider between a product and its own total; flexing the row
     * shrink-wrapped it, because the table's own layout still sizes the row.)
     * Only the header goes, since the totals rows have no header to match.
     */
    .order_details thead {
        display: none;
    }

    .order_details tbody td,
    .woocommerce table.shop_table.order_details tbody td {
        padding: 12px 0;
    }

    .order_details .acc-item {
        gap: 10px;
    }

    .order_details .acc-item-thumb {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 575.98px) {
    .acc-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .acc-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* stacked steps swap the horizontal connector for a vertical one */
    .acc-steps li {
        padding: 2px 0 0 32px;
    }

    .acc-steps li::after {
        top: 24px;
        right: auto;
        bottom: -12px;
        left: 10px;
        width: 2px;
        height: auto;
    }

    .acc-sub {
        flex-direction: column;
        align-items: flex-start;
    }

    .acc-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    /* the desktop `flex: 1 1 320px` is a HEIGHT basis once the head stacks,
       which opens a 320px hole between the title and the actions */
    .acc-panel-head > div:first-child {
        flex: 0 0 auto;
        width: 100%;
    }
}