/* =========================================
   MAIN PAGE
========================================= */
body{
    background-color: #FAFAFA;
 }
.profile-page {
    width: 100%;
    /* min-height: 100vh; */
}

.profile-layout {
    display: flex;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    gap: 36px;
}


/* =========================================
   SIDEBAR
========================================= */

.profile-sidebar {
    width: 210px;
    min-width: 138px;
    min-height: 465px;
    padding: 20px 5px 1px 24px;
    background: #FFFFFF;
    border-right: 1px solid #0000000D;
}

/* The menu (not the aside) is sticky: the aside stays stretched to the full
   page height so its white column still runs top to bottom, and the menu
   rides down inside it. Scrolls on its own if taller than the window. */
.profile-sidebar .woocommerce-MyAccount-navigation {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    border-bottom: 1px solid #5C5C611A;
    margin-bottom: 24px;
    padding: 8px 10px 16px;
    border-radius: 8px;
}

.sidebar-menu a {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    color: #16161DE5;
}

/* Active/current page -- previously text-color-only (no background at all),
   per direct request to highlight it with a brand-color background like the
   rest of the site's "current state" treatment (e.g. the header search
   results' .is-search-match / .is-active nav links). A light tint of the
   same --btn-blue (#469BC2) already used for the active link's text color
   below, not a solid fill -- this is a persistent "you are here" indicator
   sitting among plain list items, not a momentary hover/pressed state that
   would warrant a bold solid color. */
.sidebar-menu li.active {
     color: #EAF4FA;
    font-weight: bold;
}

.sidebar-menu li.active a {
    color: #469BC2;
    font-weight: 700;
}

.sidebar-menu li.logout a {
    color: #ed3131;
}

.sidebar-menu a:hover {
    color: #008bd2;
}


/* =========================================
   CONTENT
========================================= */

.profile-content {
    flex: 1;
    /* padding: 50px 0 25px 0px; */
    min-width: 0;
}

.profile-content h3 {
    margin-bottom: 38px;
}

/* =========================================
   PROFILE PICTURE CARD
========================================= */

.profile-picture-card {
    height: 100%;
    padding: 20px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 4px 0px #00000033;
}

.profile-picture-card h5 {
    margin-bottom: 20px;
    font-weight: 600;
    color: #16161DCC;
}

.profile-image-wrapper {
    width: 100%;
    max-width: 338px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #00113A33;
    margin-bottom: 26px;
}

/* aspect-ratio (not a fixed max-height alongside a fixed img height, as
   before) is what actually keeps this square -- max-width alone doesn't
   force the wrapper to be exactly 338px wide, only cap it there, so on
   this WooCommerce My Account page (where the col-xl-4 column renders
   narrower than 338px) the old rule paired a narrower actual width against
   a fixed 338px img height, producing a tall rectangle instead of a
   square. Sizing to 100% width/height of the now-square wrapper keeps this
   correct at any column width. */
.profile-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* =========================================
   PROFILE BUTTONS
========================================= */
.profile-btn {
    width: 100%;
    margin-bottom: 6px;
    padding: 10px 5px;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    line-height: 19.5px;
}

.change-photo {
    color: #469BC2;
    border: 1px solid #469BC2;
}

.remove-photo {
    color: var(--brand-red);
    border: 1px solid var(--brand-red);
}

.profile-btn:hover {
    background: #f8fcff;
}

.profile-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-photo-error {
    color: var(--brand-red);
    font-size: 13px;
    margin: 0 0 10px;
}

.profile-photo-pending {
    color: #8a6d00;
    background: #fff8e5;
    border: 1px solid #f0dca0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    margin: 0 0 10px;
}


/* =========================================
   COMMON INFO CARD
========================================= */

.info-card {
    width: 100%;
    padding: 20px;
    border: none;
    background: #fff;
    box-shadow: 0px 0px 4px 0px #00000033;
}

.card-header-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:35px;
}

span.detail-label {
    display: block;
}
/* =========================================
   BASIC DETAILS
========================================= */

/* .basic-details {
    min-height: 132px;
    border: 3px solid #159de9;
    padding: 11px;
} */

.details-row {
    row-gap: 4px;
}

.detail-item {
    margin-bottom: 44px;
}

/* =========================================
   EDIT BUTTON
========================================= */

.edit-btn {
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    color: #16161D;
    width: max-content;
    padding: 7px 20px;
    border: 1px solid #469BC2;
}

.edit-btn:hover {
    background: #f5fbff;
}

/* The real form SUBMIT buttons on My Account (Edit Account/Edit Address/Add
   Payment Method's own "Save..." buttons) -- these used to share .edit-btn
   with the Dashboard card's plain "Edit"/"Change Password" NAVIGATION links
   above, which reads fine for a link but left an actual save action looking
   like a quiet outline button instead of the site's real primary action
   color (same filled blue as .submit-btn, style.css -- the Login/Signup
   buttons). .edit-btn itself is untouched -- it's still exactly right for
   those nav links. */
/* `.woocommerce-MyAccount-content button.save-btn` (not just `.save-btn`)
   deliberately matches core WooCommerce's own
   `.woocommerce button.button` specificity (two classes + one type
   selector) -- this button also carries WooCommerce's own
   `.button`/`.woocommerce-Button` classes alongside `.save-btn`, and a
   lower-specificity rule here silently loses that fight back to core's
   default grey. */
.woocommerce-MyAccount-content button.save-btn {
    background: #469BC2;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: max-content;
    padding: 10px 24px;
    border: 0;
    border-radius: 4px;
}

.woocommerce-MyAccount-content button.save-btn:hover {
    background: #3a84a8;
}
span.detail-label {
    font-size: 16px;
    color: #16161D99;
    font-weight: 500;
}

/* =========================================
   SAVED ADDRESS
========================================= */

.address-card {
    min-height: 143px;
    margin-top: 26px;
}

.address-item {
   padding: 20px 23px;
    margin-bottom: 17px;
    border: none;
    box-shadow: 0px 0px 4px 0px #00000033;
}
.address-label, .detail-item .detail-label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 100%;
    font-weight: 500;
    color: #16161D99;
}
.info-card p ,.detail-item .detail-value{
    margin-top: 8px;
    font-size: 18px;
    line-height: 1.3;
    color: #16161D;
    font-weight: 500;
}

/* My Addresses (my-address.php) -- the actual formatted billing/shipping
   address lines. Overrides .info-card p's own bold near-black above with
   the theme's regular body-text color/weight (--text-dark, style.css) --
   a subtler read than the bold #16161D value used elsewhere in this same
   card system, which reads more like a label/figure than address content. */
.address-item p {
    color: var(--text-dark);
    font-weight: 400;
}


/* =========================================
   ACCOUNT-WIDE BUTTONS
   Every My Account endpoint (Orders, Addresses, Downloads, Payment Methods,
   Edit Account's native "Save address" form, etc.) renders inside
   .woocommerce-MyAccount-content (see woocommerce/myaccount/my-account.php),
   but only Dashboard/Edit-Account got fully custom markup above -- the rest
   still render WooCommerce's own default button markup, which had no theme
   styling at all until now (plain WooCommerce/browser default look). These
   rules catch every real WooCommerce button class actually emitted on this
   page set (confirmed against woocommerce/includes/wc-account-functions.php
   and the myaccount templates, not guessed): "pay"/"view" on Orders,
   "cancel" on Orders, "default"/"delete" on Payment Methods, "wc-forward" on
   the empty-state notices, plus the generic .button/.woocommerce-Button
   used by "Save address"/"Add payment method". Same outlined-then-filled
   look as .edit-btn/.profile-btn above, so the whole account area reads as
   one consistent component instead of two different button languages. */

.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-Button {
    display: inline-block;
    padding: 8px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border-radius: var(--radius);
    background: #fff;
    color: var(--btn-blue);
    border: 1px solid var(--btn-blue);
    transition: var(--transition);
}

.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content .woocommerce-Button:hover {
    background: #f5fbff;
}

/* Affirming / primary actions -- Pay for order, View order, the account's
   own generic form-submit buttons (Save address, Add payment method) --
   filled solid instead of outline-only, same "vibes of the label" principle
   already documented for admin buttons in .claude/agents/admin-ui.md,
   applied here to the public-facing theme. */
.woocommerce-MyAccount-content .button.pay,
.woocommerce-MyAccount-content .button.view,
.woocommerce-MyAccount-content .button.default {
    background: var(--btn-blue);
    color: #fff;
}

.woocommerce-MyAccount-content .button.pay:hover,
.woocommerce-MyAccount-content .button.view:hover,
.woocommerce-MyAccount-content .button.default:hover {
    background: var(--btn-blue-hover);
    border-color: var(--btn-blue-hover);
    color: #fff;
}

/* Destructive / cancelling actions -- Cancel order, Delete payment method --
   same red tone already established for .remove-photo above. */
.woocommerce-MyAccount-content .button.cancel,
.woocommerce-MyAccount-content .button.delete {
    color: var(--brand-red);
    border-color: var(--brand-red);
}

.woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-MyAccount-content .button.delete:hover {
    background: var(--brand-red);
    color: #fff;
}

/* =========================================
   ACCOUNT-WIDE FORM FIELDS
   Same reasoning as "ACCOUNT-WIDE BUTTONS" above -- Edit Account and Edit
   Address (billing/shipping) both render WooCommerce's own default
   .woocommerce-Input/.input-text markup inside .woocommerce-MyAccount-content,
   which had no theme styling at all (plain browser-default text inputs).
   Same visual language as the Signup page's own .field input (border,
   focus ring, height) -- see assets/css/style.css's ".field input" -- just
   using var(--radius) instead of Signup's 0 to match this page's own
   .edit-btn/.button account-wide styling above, and scoped generically to
   .woocommerce-MyAccount-content so any WooCommerce account form (not just
   Edit Account) benefits automatically.
========================================= */

.woocommerce-MyAccount-content .form-row label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--lable);
}

/* Edit Account's own hand-written template (form-edit-account.php) uses
   "woocommerce-Input ... input-text"; every OTHER account form field (Edit
   Address, and anything else built on WooCommerce's own woocommerce_form_field()
   -- billing/shipping/company/postcode/phone/etc.) only ever gets "input-text"
   (see wc-template-functions.php), never "woocommerce-Input" -- so ".input-text"
   is the one class actually shared by both and is what this targets, with
   ".woocommerce-Input" kept alongside only for the (redundant but harmless)
   case where a field carries both. Selects are matched generically within
   .form-row since WooCommerce gives its three different select variants three
   different class sets of their own (plain "select", country's
   "country_to_state country_select", state's "state_select") with nothing in
   common except that wrapper. */
.woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-MyAccount-content .form-row input.woocommerce-Input,
.woocommerce-MyAccount-content .form-row textarea.input-text,
.woocommerce-MyAccount-content .form-row select {
    width: 100%;
    height: 44px;
    padding: 10px 13px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text-input);
    font-size: 0.875rem;
    font-family: inherit;
    transition: var(--transition);
}

.woocommerce-MyAccount-content .form-row textarea.input-text {
    height: auto;
    min-height: 100px;
}

.woocommerce-MyAccount-content .form-row input.input-text::placeholder {
    color: var(--placeholder);
}

.woocommerce-MyAccount-content .form-row input.input-text:focus,
.woocommerce-MyAccount-content .form-row textarea.input-text:focus,
.woocommerce-MyAccount-content .form-row select:focus {
    border-color: var(--btn-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(111, 168, 196, .2);
}

/* Display name's own helper text (Edit Account) -- was plain unstyled
   browser-default <em> text; a smaller, subtler note reads better sitting
   right under the input than text the same size/weight as the field itself. */
#account_display_name_description {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* The "Password change" fieldset (Edit Account) -- neutralize the browser's
   default fieldset/legend box so it reads as a plain sub-section of the
   same .info-card, not a nested bordered box. */
.woocommerce-EditAccountForm fieldset {
    border: 0;
    padding: 0;
    margin: 24px 0 0;
}

.woocommerce-EditAccountForm fieldset legend {
    padding: 0;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #16161DCC;
}

/* The "Change my password" checkbox that reveals the fieldset above --
   assets/js/edit-account.js owns the actual show/hide. */
.password-change-toggle {
    margin: 24px 0 0;
}

.password-change-toggle label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--lable);
    cursor: pointer;
}

.password-change-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* =========================================
   ACCOUNT-WIDE TABLES
   Payment Methods (woocommerce/myaccount/payment-methods.php) is the one
   real WooCommerce data table left in this card-based account area -- it
   previously had zero theme styling (raw core `.shop_table` default look).
   A clean bordered/striped table matching the same card language (rounded
   corners, subtle borders, no harsh browser-default grid lines) rather than
   copying WooCommerce's own dense admin-style table. Reusable by any other
   account table this project adds later (add the `.account-table` class to
   it), not payment-methods-specific.
========================================= */

.account-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #0000000D;
    border-radius: 8px;
    overflow: hidden;
}

.account-table th {
    padding: 12px 16px;
    background: #f7fafc;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #16161D99;
    text-align: left;
    border-bottom: 1px solid #0000000D;
}

.account-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #16161D;
    border-bottom: 1px solid #5C5C611A;
}

.account-table tr:last-child td {
    border-bottom: 0;
}

.account-table tr.default-payment-method {
    background: #EAF4FA;
}

/* =========================================
   PAYMENT GATEWAY LIST (Add Payment Method)
   woocommerce/myaccount/form-add-payment-method.php's gateway radio list --
   previously raw core `ul.payment_methods` markup with no theme styling at
   all (not even the generic form-field rules above, since these are radio
   inputs/labels, not .input-text fields). Each gateway reads as its own
   selectable row/card instead of a bare bullet list.
========================================= */

.payment-gateway-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.payment-gateway-list li {
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    transition: var(--transition);
}

.payment-gateway-list li:has(input:checked) {
    border-color: var(--btn-blue);
    background: #EAF4FA;
}

.payment-gateway-list input.input-radio {
    margin-right: 10px;
}

.payment-gateway-list label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-input);
    cursor: pointer;
}

/* =========================================
   SECURITY
========================================= */

.security-card {
    min-height: 83px;
    margin-top: 10px;
}

.security-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.security-title {
    margin-bottom: 13px;
}

/* .password {
    display: block;
    color: #222;
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 1;
} */

/* .password-btn {
    width: 90px;
} */


/* =========================================
   LARGE DESKTOP
========================================= */

@media (min-width: 1400px) {

    /* .profile-layout {
        max-width: 1200px;
    } */

    /* .profile-sidebar {
        width: 150px;
        min-width: 150px;
    } */

    /* .profile-content {
        padding-left: 18px;
    } */
     .edit-btn {
       padding: 7px 60px;
}
    .profile-sidebar {
        width: 298px;
    }
    .profile-picture-card{
        padding: 36px;
    }
    .profile-picture-card h5{
        margin-bottom: 36px;
    }
    .info-card{
        padding: 30px;
    }
}


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

@media (max-width: 991px) {

    .profile-layout {
        max-width: 100%;
    }

    /* Per direct request: now that the header's own mobile menu
       (header.php/header.css) puts an account avatar in the header itself
       -- opening the exact same My Profile/My Orders/Wishlist/Saved
       Addresses/Settings/Logout links this sidebar also has -- this
       in-page sidebar is redundant on mobile/tablet and is hidden outright
       rather than just reflowed. .profile-content (flex:1) naturally
       expands to the freed-up width on its own, no extra rule needed.
       Matches the SAME <=991px breakpoint header.css's own mobile menu
       switches over at, so the two never disagree about what counts as
       "mobile" on this site. */
    .profile-sidebar {
        display: none;
    }

    .profile-content {
        padding: 25px 20px;
    }

    .profile-picture-card {
        height: auto;
        min-height: 100%;
    }

    .profile-image-wrapper {
        /* height: 190px; */
    }

    .page-title {
        font-size: 20px;
    }
    .info-card p, .detail-item .detail-value {
        font-size: 13px !important;
    }

  .address-label, .detail-item .detail-label , span.detail-label {
        font-size: 13px !important;
    }
    .edit-btn {
        font-size: 13px;
    }
    .profile-content h5{
       font-size: 18px;
    }
}


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

@media (max-width: 767px) {

    .profile-layout {
        display: block;
    }


    /* .profile-sidebar itself is already `display: none` at this width
       (the <=991px TABLET block above) -- nothing further needed here. */


    /* Content */

    .profile-content {
        width: 100%;
        padding: 20px 15px 30px;
    }

    .page-title {
        margin-bottom: 15px;
        font-size: 20px;
    }


    /* Profile */

    .profile-picture-card {
        height: auto;
        min-height: 0;
        padding: 18px;
        margin-bottom: 15px;
    }

    .profile-image-wrapper {
        margin-top: 15px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    /* No img override here anymore -- the base rule's width:100%/height:100%
       (filling the aspect-ratio:1/1 wrapper) already keeps this square at
       any width; a mobile-only height:auto/max-height:320px previously
       reintroduced the same non-square mismatch this fix addresses. */

    .profile-btn {
        font-size: 13px;
        width: 65%;
        display: block;
        margin: 0 auto;
        margin-bottom: 10px;
    }


    /* Basic Details */

    .basic-details {
        min-height: 0;
        padding: 14px;
        border-width: 2px;
    }

    .info-card {
        padding: 15px;
    }

    .card-title {
        font-size: 13px;
    }

    .detail-label {
        font-size: 12px;
    }

    .detail-value {
        font-size: 13px;
    }

    .detail-item {
        margin-bottom: 12px;
    }


    /* Address */

    .address-card {
        min-height: 0;
    }

    .address-item {
        padding: 10px;
    }

    .address-label {
        font-size: 9px;
    }

    .address-item p {
        font-size: 10px;
    }


    /* Security */

    .security-card {
        min-height: 0;
    }

    .security-wrapper {
        gap: 15px;
    }

    .password {
        font-size: 10px;
    }

    .password-btn {
        width: 110px;
        flex-shrink: 0;
    }
    .address-label, .detail-item .detail-label{
        font-size: 12px;
    }
    .info-card p, .detail-item .detail-value{
        font-size: 13px;
    }
    .profile-picture-card h5 {
        margin-bottom: 20px;
    }
}

/* =========================================
   ACCOUNT NOTICES -- FLOATING TOASTS
   assets/js/account-notices.js relocates WooCommerce's own
   `.woocommerce-notices-wrapper` (every My Account endpoint -- Dashboard/
   Orders/Addresses/Edit Account/Edit Address/Payment Methods/...) into these
   toasts instead of its default inline position above the form. Same
   success/error/info color recipe as the Signup page's own `.status-callout`
   family (assets/css/signup.css), kept as its own copy here rather than a
   shared dependency since the two stylesheets are never enqueued together.
========================================= */

.zurgle-toast-container {
    position: fixed;
    top: 214px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 32px);
}

.zurgle-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
    font-size: 14px;
    line-height: 1.5;
    opacity: 1;
    transform: translateX(0);
    transition: opacity .25s ease, transform .25s ease;
}

.zurgle-toast--leaving {
    opacity: 0;
    transform: translateX(16px);
}

.zurgle-toast-body {
    flex: 1;
}

.zurgle-toast-body ul {
    margin: 0;
    padding-left: 18px;
}

.zurgle-toast-close {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: .6;
}

.zurgle-toast-close:hover {
    opacity: 1;
}

.zurgle-toast--success {
    background: #edf7ed;
    border: 1px solid #b7dfb9;
    color: #235c27;
}

.zurgle-toast--error {
    background: #fdecea;
    border: 1px solid #f3b6b2;
    color: #7a2018;
}

.zurgle-toast--info {
    background: #eaf5fa;
    border: 1px solid #bcdcf0;
    color: #1c4a72;
}

@media (max-width: 480px) {
    .zurgle-toast-container {
        left: 16px;
        right: 16px;
        width: auto;
    }
}

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

@media (max-width: 480px) {

    .profile-content {
        padding: 18px 12px 25px;
    }

    .page-title {
        font-size: 18px;
    }

    .profile-picture-card {
        padding: 15px;
    }

    .info-card {
        padding: 12px;
    }

    .card-header-custom {
        margin-bottom: 12px;
    }

    .edit-btn {
        font-size: 14px;
    }

    .basic-details {
        padding: 12px;
    }

    .detail-label {
        font-size: 14px;
    }

    .detail-value {
         font-size: 14px;
    }

    .security-wrapper {
        align-items: flex-start;
    }

    .password-btn {
         font-size: 14px;
         width: auto;
    }
}

/* =========================================================
   MY ACCOUNT GRID (woocommerce/myaccount/dashboard.php) -- the new
   Dashboard/root landing view, one tile per wc_get_account_menu_items()
   entry (same role-filtered array the sidebar itself renders from).
========================================================= */
.my-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 18px;
}

.my-account-grid-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px 16px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 0px #00000033;
    text-align: center;
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
}

.my-account-grid-tile:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.my-account-grid-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #EAF4FA;
    color: var(--btn-blue, #469BC2);
    font-size: 22px;
}

.my-account-grid-tile-label {
    font-size: 15px;
    font-weight: 600;
    color: #16161DE5;
}

.my-account-grid-tile--logout .my-account-grid-tile-icon {
    background: #FEE2E2;
    color: #ed3131;
}

.my-account-grid-tile--logout .my-account-grid-tile-label {
    color: #ed3131;
}

@media (max-width: 480px) {
    .my-account-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    .my-account-grid-tile {
        padding: 20px 10px;
    }

    .my-account-grid-tile-icon {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .my-account-grid-tile-label {
        font-size: 13px;
    }
}

/* =========================================================
   OVERVIEW SIDEBAR (woocommerce/myaccount/navigation.php) -- icon+label
   list, redesigned per a direct UI-reference screenshot. Still fed entirely
   by wc_get_account_menu_items() -- only the per-row icon/badge/active
   treatment is new here.
========================================================= */
.overview-sidebar-menu {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.overview-sidebar-menu li {
    margin-bottom: 4px;
    border: 0;
    border-radius: 8px;
    padding: 0;
}

.overview-sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #16161DE5;
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
}

.overview-sidebar-menu li:not(.active) a:hover {
    background: #FAFAFA;
}

.overview-sidebar-menu li.active a {
    background: #EAF4FA;
    color: var(--btn-blue, #469BC2);
    font-weight: 700;
}

.overview-sidebar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    font-size: 15px;
}

.overview-sidebar-label {
    flex: 1 1 auto;
    min-width: 0;
}

.overview-sidebar-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-red, #E8332A);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.overview-sidebar-menu--logout {
    padding-top: 12px;
    border-top: 1px solid #0000000D;
}

.overview-sidebar-menu--logout a {
    color: var(--brand-red, #E8332A);
}

.overview-sidebar-menu--logout a:hover {
    background: #FDECEA;
}

/* =========================================================
   OVERVIEW PAGE (woocommerce/myaccount/dashboard.php) -- welcome banner,
   Quick Actions, Activity at a Glance, then a 3-column icon-based widget
   grid. Row markup inside each widget reuses .cart-item (header Cart/
   Wishlist drawers) and .notification-item/.notification-list (header
   Notifications bell) as-is -- see dashboard.php's own docblock for why.
========================================================= */
.overview-welcome {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(260px, 380px);
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding: 22px 24px;
    border-radius: 14px;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.9) 0, transparent 45%),
        linear-gradient(120deg, #f2f6fd 0%, #f4f1fd 55%, #fbf5ee 100%);
    border: 1px solid #ebeef8;
    overflow: hidden;
}

.overview-welcome-text .my-account-heading {
    margin: 0;
    /* !important: style.css/media.css set h1 at 4rem / 52px site-wide. */
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: 0;
}

.overview-welcome-text p {
    margin: 6px 0 0;
    color: var(--text-muted, #6B7280);
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 575.98px) {
    .overview-welcome-text .my-account-heading {
        font-size: 22px !important;
    }
}

.overview-welcome-art {
    display: flex;
    justify-content: center;
    line-height: 0;
}

.overview-welcome-art svg {
    width: 220px;
    height: auto;
    max-width: 100%;
}

.overview-promo-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(70, 80, 140, 0.08);
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
}

.overview-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(70, 80, 140, 0.14);
}

.overview-promo-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff6e0;
    color: #e0a10b;
    font-size: 17px;
}

.overview-promo-body {
    flex: 1;
    min-width: 0;
}

.overview-promo-card strong {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    color: #16161DE5;
}

.overview-promo-body span {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #6B7280);
    line-height: 1.45;
}

.overview-promo-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--btn-blue, #469bc2);
    color: #fff;
    font-size: 14px;
    transition: var(--transition, 0.2s ease);
}

.overview-promo-card:hover .overview-promo-arrow {
    background: var(--btn-blue-hover, #5c93af);
}

@media (max-width: 1199.98px) {
    .overview-welcome {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
    }

    .overview-welcome-art {
        display: none;
    }
}

.overview-section-title {
    margin: 0 0 14px;
    /* !important: media.css forces every h2 to 36px at <=1500px. */
    font-size: 16px !important;
    line-height: 1.4 !important;
    letter-spacing: 0;
    font-weight: 700;
    color: #16161DE5;
}

.overview-quick-actions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}

.overview-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: #16161DE5;
    transition: var(--transition, 0.2s ease);
}

.overview-quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.overview-quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    font-size: 16px;
}

.overview-quick-action--blue { background: #EAF4FA; }
.overview-quick-action--blue .overview-quick-action-icon { color: var(--btn-blue, #469BC2); }

.overview-quick-action--orange { background: #FFF1E6; }
.overview-quick-action--orange .overview-quick-action-icon { color: #c2650b; }

.overview-quick-action--green { background: #E9F9F0; }
.overview-quick-action--green .overview-quick-action-icon { color: #1a9c5c; }

.overview-quick-action--pink { background: #FDEEF2; }
.overview-quick-action--pink .overview-quick-action-icon { color: #c23566; }

.overview-quick-action--purple { background: #F3EEFC; }
.overview-quick-action--purple .overview-quick-action-icon { color: #6b3fc2; }

.overview-quick-action--gray { background: #F1F2F4; }
.overview-quick-action--gray .overview-quick-action-icon { color: #4b5363; }

.overview-glance-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.overview-glance-header .overview-section-title {
    margin-bottom: 4px;
}

.overview-glance-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted, #6B7280);
}

.overview-period-form select {
    min-width: 150px;
}

.overview-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.overview-stat-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 0px #00000033;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Each tile links to its own page (Orders, My Auctions, Wishlist, Messages). */
.overview-stat-tile:hover,
.overview-stat-tile:focus-visible {
    color: inherit;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    transform: translateY(-2px);
}

.overview-stat-tile:focus-visible {
    outline: 2px solid var(--btn-blue, #469BC2);
    outline-offset: 2px;
}

.overview-stat-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 16px;
}

.overview-stat-icon--blue { background: #EAF4FA; color: var(--btn-blue, #469BC2); }
.overview-stat-icon--orange { background: #FFF1E6; color: #c2650b; }
.overview-stat-icon--pink { background: #FDEEF2; color: #c23566; }

.overview-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: #16161DE5;
    line-height: 1.2;
}

.overview-stat-label {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-muted, #6B7280);
}

.overview-stat-trend {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
}

.overview-stat-trend.is-up { color: #1a9c5c; }
.overview-stat-trend.is-down { color: var(--brand-red, #E8332A); }

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.overview-widget {
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 4px 0px #00000033;
}

.overview-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.overview-widget-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.overview-widget-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
}

.overview-widget-icon--blue { background: #EAF4FA; color: var(--btn-blue, #469BC2); }
.overview-widget-icon--orange { background: #FFF1E6; color: #c2650b; }
.overview-widget-icon--pink { background: #FDEEF2; color: #c23566; }
.overview-widget-icon--yellow { background: #FFF8E1; color: #b28704; }
.overview-widget-icon--red { background: #FDECEA; color: var(--brand-red, #E8332A); }

.overview-widget-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #16161DE5;
    line-height: 1.3;
}

.overview-view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #EAF4FA;
    font-size: 12px;
    font-weight: 700;
    color: var(--btn-blue, #469BC2);
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
}

.overview-view-all i {
    font-size: 10px;
    transition: transform 0.2s ease;
}

.overview-view-all:hover {
    background: var(--btn-blue, #469BC2);
    color: #fff;
}

.overview-view-all:hover i {
    transform: translateX(2px);
}

.overview-empty-state {
    padding: 30px 10px;
    text-align: center;
}

.overview-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: #F1F2F4;
    color: #9ca3af;
    font-size: 20px;
}

.overview-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #16161DE5;
}

.overview-empty-subtitle {
    margin: 4px 0 14px;
    font-size: 12px;
    color: var(--text-muted, #6B7280);
}

.overview-empty-cta {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--btn-blue, #469BC2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition, 0.2s ease);
}

.overview-empty-cta:hover {
    background: var(--btn-blue-hover, #5C93AF);
    color: #fff;
}

.overview-row-list .cart-item,
.notification-list .notification-item {
    padding-left: 0;
    padding-right: 0;
}

.overview-row-list .cart-item:last-child,
.notification-list .notification-item:last-child {
    border-bottom: 0;
}

.notification-list {
    border: 0;
    border-radius: 0;
}

/* .cart-item-content's own `span` subtitle rule (style.css) covers the
   Wishlist widget; the Recent Orders/Auctions widgets use `small` instead so
   the status badge text doesn't visually compete with a product's own
   sale-price markup elsewhere -- same look, different element. */
.cart-item-content small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-muted, #6B7280);
}

.overview-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

.overview-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: #EAF4FA;
    color: var(--btn-blue, #469BC2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.overview-badge--success {
    background: #e9f9f0;
    color: #1a9c5c;
}

.overview-badge--warning {
    background: #fff8e1;
    color: #b28704;
}

.overview-badge--danger {
    background: #fdecea;
    color: var(--brand-red, #E8332A);
}

.overview-badge--info {
    background: #EAF4FA;
    color: var(--btn-blue, #469BC2);
}

.overview-badge-row small {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted, #6B7280);
}

@media (max-width: 1200px) {
    .overview-quick-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

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

@media (max-width: 900px) {
    .overview-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-welcome {
        grid-template-columns: 1fr;
        padding: 18px;
    }
}
/* =========================================
   PERSONAL INFORMATION (template-parts/myaccount/my-profile-content.php)
========================================= */

.zurgle-pi {
    --pi-border: #e5e8ec;
    --pi-soft: #f3f7fb;
    --pi-band: #e8f1f8;

    padding-bottom: 40px;
}

.zurgle-pi-heading {
    margin-bottom: 22px;
}

.zurgle-pi-heading .my-account-heading {
    margin-bottom: 4px;
    line-height: 1.2;
}

.zurgle-pi-heading p,
.zurgle-pi-card-title p,
.zurgle-pi-email,
.zurgle-pi-muted {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

.zurgle-pi-grid {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.zurgle-pi-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.zurgle-pi-card {
    padding: 20px;
    background: #fff;
    border: 1px solid var(--pi-border);
    border-radius: 12px;
}

/* ---------- Photo card ---------- */

.zurgle-pi-photo-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 18px 18px;
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
}

/* Tinted band behind the top half of the avatar. */
.zurgle-pi-photo-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 112px;
    background: var(--pi-band);
}

.zurgle-pi-avatar {
    position: relative;
    width: 150px;
    height: 150px;
    margin-bottom: 16px;
}

.zurgle-pi-avatar img {
    width: 100%;
    height: 100%;
    border: 5px solid #fff;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.zurgle-pi-avatar-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--btn-blue, #469bc2);
    color: #fff;
    font-size: 13px;
}

/* media.css sizes every h2 with !important below 1500px. */
.zurgle-pi .zurgle-pi-name {
    margin: 0 0 2px !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 700;
    color: var(--text-dark, #303233);
    overflow-wrap: anywhere;
}

.zurgle-pi-email {
    margin-bottom: 18px;
    overflow-wrap: anywhere;
}

.zurgle-pi-notice {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
}

.zurgle-pi-notice--error   { background: #fdecec; color: var(--brand-red, #e8332a); }
.zurgle-pi-notice--pending { background: #fff4e0; color: #8a5a0a; }

.zurgle-pi-remove {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 10px;
    background: none;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-red, #e8332a);
    cursor: pointer;
}

.zurgle-pi-remove:hover {
    background: #fdecec;
}

.zurgle-pi-remove[hidden] {
    display: none;
}

/* ---------- Buttons ---------- */

.zurgle-pi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--btn-blue, #469bc2);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--btn-blue, #469bc2);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.zurgle-pi-btn:hover {
    background: var(--btn-blue, #469bc2);
    color: #fff;
}

.zurgle-pi-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.zurgle-pi-btn--block {
    width: 100%;
}

.zurgle-pi-btn:focus-visible,
.zurgle-pi-remove:focus-visible {
    outline: 2px solid var(--btn-blue, #469bc2);
    outline-offset: 2px;
}

/* ---------- Card header ---------- */

.zurgle-pi-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.zurgle-pi-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    margin-top: 3px;
    font-size: 18px;
    color: var(--text-dark, #303233);
}

.zurgle-pi-card-title {
    flex: 1;
    min-width: 0;
}

.zurgle-pi .zurgle-pi-card-title h2,
.zurgle-pi .zurgle-pi-name {
    letter-spacing: normal;
}

.zurgle-pi .zurgle-pi-card-title h2 {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700;
    color: var(--text-dark, #303233);
}

/* ---------- Basic details ---------- */

.zurgle-pi-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pi-border);
}

.zurgle-pi-details > div {
    min-width: 0;
    padding: 0 18px;
    border-left: 1px solid var(--pi-border);
}

.zurgle-pi-details > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.zurgle-pi-details dt {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted, #6b7280);
}

.zurgle-pi-details dd {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-dark, #303233);
    overflow-wrap: anywhere;
}

/* ---------- Addresses ---------- */

.zurgle-pi-addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.zurgle-pi-addresses.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.zurgle-pi-address {
    border: 1px solid var(--pi-border);
    border-radius: 10px;
    overflow: hidden;
}

.zurgle-pi .zurgle-pi-address h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 11px 16px;
    background: var(--pi-soft);
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 600;
    color: var(--text-dark, #303233);
}

.zurgle-pi-address h3 i {
    color: var(--btn-blue, #469bc2);
}

.zurgle-pi-address address {
    margin: 0;
    padding: 14px 16px 16px;
    font-size: 14px;
    font-style: normal;
    line-height: 1.6;
    color: var(--text-dark, #303233);
}

/* ---------- Security ---------- */

.zurgle-pi-security {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 10px;
    background: var(--pi-soft);
}

.zurgle-pi-security-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 0 0 auto;
    padding-right: 24px;
    border-right: 1px solid #d9e3ec;
    font-size: 14px;
    color: var(--text-dark, #303233);
}

.zurgle-pi-dots {
    font-size: 16px;
    letter-spacing: 3px;
}

.zurgle-pi-security p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #6b7280);
}

/* ---------- Responsive ---------- */

@media (max-width: 1199.98px) {
    .zurgle-pi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .zurgle-pi-photo {
        max-width: 420px;
    }
}

@media (max-width: 767.98px) {
    .zurgle-pi-card-header {
        flex-wrap: wrap;
    }

    .zurgle-pi-card-header .zurgle-pi-btn {
        width: 100%;
    }

    .zurgle-pi-details {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .zurgle-pi-details > div {
        padding: 0;
        border-left: 0;
    }

    .zurgle-pi-addresses {
        grid-template-columns: minmax(0, 1fr);
    }

    .zurgle-pi-security {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .zurgle-pi-security-field {
        padding-right: 0;
        border-right: 0;
    }

    .zurgle-pi-photo {
        max-width: none;
    }
}

/* ---- Overview: won auctions awaiting payment (countdown panel) ----
   woocommerce/myaccount/dashboard.php; ticking: assets/js/payment-countdown.js */
.overview-pay-due {
    margin-bottom: 28px;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff8ec 0%, #fff 60%);
    border: 1px solid #f6d9a8;
    box-shadow: 0px 0px 4px 0px #00000014;
}

.overview-pay-due-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.overview-pay-due-head .overview-section-title {
    margin-bottom: 2px;
}

.overview-pay-due-head p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted, #6B7280);
}

.overview-pay-due-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fde9c8;
    color: #d97706;
    font-size: 17px;
}

.overview-pay-due-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pay-due-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ece3d3;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
}

.pay-due-card.is-urgent {
    border-left-color: #dc2626;
}

.pay-due-card.is-expired {
    border-left-color: #9ca3af;
    opacity: 0.75;
}

.pay-due-thumb img {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
}

.pay-due-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-dark, #303233);
}

.pay-due-name:hover {
    color: var(--btn-blue, #469bc2);
}

.pay-due-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 3px 0 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted, #6B7280);
}

.pay-due-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.pay-due-figures > span {
    display: flex;
    flex-direction: column;
}

.pay-due-figures small,
.pay-due-timer small {
    font-size: 11px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #6B7280);
}

.pay-due-figures strong {
    font-size: 15px;
    color: var(--text-dark, #303233);
}

.pay-due-timer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    min-width: 150px;
}

.pay-due-clock {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #d97706;
    white-space: nowrap;
}

.pay-due-card.is-urgent .pay-due-clock {
    color: #dc2626;
}

.pay-due-card.is-expired .pay-due-clock {
    font-size: 14px;
    color: #6b7280;
}

.pay-due-timer .pay-due-deadline {
    text-transform: none;
    letter-spacing: 0;
}

.pay-due-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: var(--radius, 4px);
    background: var(--btn-blue, #469bc2);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.pay-due-btn:hover {
    background: var(--btn-blue-hover, #5c93af);
    color: #fff;
}

.pay-due-btn.is-disabled {
    background: #d1d5db;
    color: #fff;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .pay-due-card {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .pay-due-thumb img {
        width: 64px;
        height: 64px;
    }

    .pay-due-timer {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 10px;
        min-width: 0;
        text-align: left;
        padding-top: 10px;
        border-top: 1px dashed #ece3d3;
    }

    .pay-due-btn {
        grid-column: 1 / -1;
    }
}

/* Phone: two stat tiles per row leave no room for the trend badge beside
   the label -- let it wrap underneath instead of overflowing the page. */
@media (max-width: 575.98px) {
    .overview-stat-tile {
        flex-wrap: wrap;
        min-width: 0;
        padding: 14px;
        gap: 10px;
    }

    .overview-stat-trend {
        margin-left: 0;
    }
}