/* =============================================================================
   Member Profiles — Front-end Styles
   ============================================================================= */

/* Theme variables — emitted on :root by MP_Theme_Vars.
   Cascade (last wins): hardcoded defaults < detected Brizy palette/font <
   plugin settings. Fallbacks below preserve the original Around Hermitage
   palette so sites with no Brizy and no overrides render unchanged.
       --mp-accent        primary brand colour
       --mp-accent-hover  hover/pressed state
       --mp-text          body text colour
       --mp-font-family   optional override; defaults to `inherit`
   Status banners (info/success/warning/error) are intentionally hardcoded —
   they carry semantic meaning and shouldn't be retinted by the brand colour.
*/

/* ---------------------------------------------------------------------------
   Account Navigation
   --------------------------------------------------------------------------- */

.woocommerce-MyAccount-navigation {
    padding: 20px;
    box-sizing: border-box;
}

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

.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #e2e2e2;
}

.woocommerce-MyAccount-navigation ul li:first-child {
    border-top: 1px solid #e2e2e2;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 10px 14px;
    color: var(--mp-accent, #3c4d79);
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.15s, color 0.15s;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #f0f2f7;
    color: var(--mp-accent, #3c4d79);
    text-decoration: none;
}

.woocommerce-MyAccount-navigation ul li.is-active > a {
    background-color: color-mix(in srgb, var(--mp-accent, #3c4d79) 10%, transparent);
    border-left: 3px solid var(--mp-accent, #3c4d79);
    color: var(--mp-accent, #3c4d79);
    font-weight: 600;
    padding-left: 11px; /* compensate for the 3px border */
}

/* ---------------------------------------------------------------------------
   Status / Notice Banners
   --------------------------------------------------------------------------- */

.mp-notice {
    display: block;
    padding: 12px 16px;
    margin-bottom: 24px;
    border-left: 4px solid;
    border-radius: 0 4px 4px 0;
    font-size: 15px;
    line-height: 1.5;
}

.mp-notice--info {
    background-color: #e8f5fa;
    border-color: #0091b6;
    color: #005f78;
}

.mp-notice--success {
    background-color: #e8f9f1;
    border-color: #09d87e;
    color: #076b3e;
}

.mp-notice--warning {
    background-color: #fff8e1;
    border-color: #ffba00;
    color: #7a5800;
}

.mp-notice--error {
    background-color: #fde8eb;
    border-color: #ef4059;
    color: #8b1a28;
}

.mp-notice a {
    text-decoration: underline;
}

.woocommerce-MyAccount-content .mp-dashboard-link {
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.woocommerce-MyAccount-content .mp-dashboard-link a {
    display: inline-flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    border-radius: 4px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* Primary (Edit) — solid navy */
.woocommerce-MyAccount-content .mp-dashboard-link a:first-of-type {
    background: var(--mp-accent, #3c4d79);
    color: #ffffff !important;
    border: 1px solid var(--mp-accent, #3c4d79);
}

.woocommerce-MyAccount-content .mp-dashboard-link a:first-of-type:hover {
    background: var(--mp-accent-hover, #2c3a5c);
    border-color: var(--mp-accent-hover, #2c3a5c);
    color: #ffffff !important;
}

/* Secondary (View) — outline navy */
.woocommerce-MyAccount-content .mp-dashboard-link a:nth-of-type(2) {
    background: #ffffff;
    color: var(--mp-accent, #3c4d79) !important;
    border: 1px solid var(--mp-accent, #3c4d79);
}

.woocommerce-MyAccount-content .mp-dashboard-link a:nth-of-type(2):hover {
    background: var(--mp-accent, #3c4d79);
    color: #ffffff !important;
}

.mp-dashboard-link-sep {
    display: none;
}

/* ---------------------------------------------------------------------------
   Read-only profile summary (rendered while submission is awaiting review)
   Selectors are intentionally specific so the active theme doesn't override.
   --------------------------------------------------------------------------- */

table.mp-profile-summary {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 24px;
    background: transparent;
    table-layout: fixed;
}

table.mp-profile-summary tbody tr {
    border: 0;
}

table.mp-profile-summary th,
table.mp-profile-summary td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid #e6e6e6;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mp-text, #222);
    word-break: break-word;
    overflow-wrap: anywhere;
    background: transparent;
}

table.mp-profile-summary th {
    width: 200px;
    font-weight: 600;
    color: #444;
    background: #fafafa;
    white-space: normal;
}

table.mp-profile-summary tr:last-child th,
table.mp-profile-summary tr:last-child td {
    border-bottom: 0;
}

table.mp-profile-summary td a {
    color: #0073aa;
    word-break: break-all;
}

table.mp-profile-summary .mp-empty {
    color: #999;
    font-style: italic;
}

/* Image preview (thumbnail + filename) */
.mp-profile-summary .mp-image-preview {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 12px 8px 0;
    max-width: 160px;
    vertical-align: top;
}

.mp-profile-summary .mp-image-preview img {
    display: block;
    max-width: 140px;
    max-height: 100px;
    width: auto;
    height: auto;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
    background: #fff;
}

.mp-profile-summary .mp-image-filename {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
    color: #777;
    word-break: break-all;
}

/* Multi-value container (e.g. image galleries) */
.mp-profile-summary .mp-multi {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}

@media (max-width: 600px) {
    table.mp-profile-summary,
    table.mp-profile-summary tbody,
    table.mp-profile-summary tr,
    table.mp-profile-summary th,
    table.mp-profile-summary td {
        display: block;
        width: auto;
    }
    table.mp-profile-summary th {
        background: transparent;
        padding: 12px 14px 0;
        border-bottom: 0;
    }
    table.mp-profile-summary td {
        padding: 4px 14px 12px;
    }
}

/* ---------------------------------------------------------------------------
   Edit Profile Form (Toolset CRED)
   --------------------------------------------------------------------------- */

/* Form-wide layout: tighten spacing, consistent inputs.
   Font-family defaults to `inherit` so the active theme drives type unless a
   plugin setting (or detected Brizy default) supplies an override. */
.woocommerce-MyAccount-content .cred-form {
    max-width: 720px;
    font-family: var(--mp-font-family, inherit);
}

.woocommerce-MyAccount-content .cred-form input,
.woocommerce-MyAccount-content .cred-form textarea,
.woocommerce-MyAccount-content .cred-form select,
.woocommerce-MyAccount-content .cred-form button {
    font-family: inherit;
}

/* Each field group (CRED wraps label+input pairs in a wpt-repetitive div).
   Adds breathing room and a subtle divider between fields. */
.woocommerce-MyAccount-content .cred-form > .js-wpt-field-items,
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive,
.woocommerce-MyAccount-content .cred-form > p {
    margin: 0 0 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}

/* Last field before the submit button: drop the trailing divider. */
.woocommerce-MyAccount-content .cred-form > .js-wpt-field-items:last-of-type,
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:last-of-type,
.woocommerce-MyAccount-content .cred-form > p:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Hide the TinyMCE Visual/Code editor mode tabs inside CRED forms — keeps
   the toolbar and editor area, just removes the mode switcher. */
.woocommerce-MyAccount-content .cred-form .wp-editor-tabs,
.woocommerce-MyAccount-content .cred-form .wp-switch-editor {
    display: none !important;
}

/* Categories field: move the per-field divider to the form-group boundary
   so the "Add New" link sits directly under the pills, not after a gap. */
.woocommerce-MyAccount-content .cred-form .form-group:has(> .wpt-hierarchical-taxonomy-add-new-show-hide) {
    margin: 0 0 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}

.woocommerce-MyAccount-content .cred-form .form-group:has(> .wpt-hierarchical-taxonomy-add-new-show-hide) > .js-wpt-field-items {
    margin: 0;
    padding: 0;
    border: 0;
}

.woocommerce-MyAccount-content .cred-form .form-group:has(> .wpt-hierarchical-taxonomy-add-new-show-hide) > .wpt-hierarchical-taxonomy-add-new-show-hide {
    display: inline-block;
    margin: 6px 0 0;
}

/* Tag-style taxonomy fields (e.g. Listing Features) — restructure the field
   so the row order reads: selected pills → "Show Popular" link → popular
   tags list (when shown) → input → Add button. Toolset's source order has
   the popular link as the last sibling of the form-group, with the input,
   button and popular-list nested inside .js-wpt-field-items; we flatten via
   display:contents so flex `order` can rearrange everything. */
.woocommerce-MyAccount-content .cred-form .form-group:has(> .wpt-taxonomy-popular-show-hide),
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}

.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) > .js-wpt-field-items {
    display: contents;
}

.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) > label { order: 1; }
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) .tagchecklist { order: 2; }
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) > .wpt-taxonomy-popular-show-hide { order: 3; align-self: flex-start; margin: 0; }
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) .wpt-taxonomy-show-popular-list { order: 4; }
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) .wpt-new-taxonomy-title { order: 5; }
.woocommerce-MyAccount-content .cred-form .form-group:has(.wpt-taxonomy-popular-show-hide) .wpt-taxonomy-add-new { order: 6; align-self: flex-start; }

/* Popular tags list — flex container; each tag pill styles itself. */
.woocommerce-MyAccount-content .cred-form .wpt-taxonomy-show-popular-list {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-shadow: none;
}

/* Each popular tag rendered as its own bordered pill. */
.woocommerce-MyAccount-content .cred-form .wpt-taxonomy-show-popular-list a,
.woocommerce-MyAccount-content .cred-form .wpt-taxonomy-show-popular-list .wpt-taxonomy-popular-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    margin: 0;
    background: #f5f6f8;
    color: #333;
    border: 1px solid #cbd1da;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.woocommerce-MyAccount-content .cred-form .wpt-taxonomy-show-popular-list a:hover,
.woocommerce-MyAccount-content .cred-form .wpt-taxonomy-show-popular-list .wpt-taxonomy-popular-add:hover {
    background: var(--mp-accent, #3c4d79);
    border-color: var(--mp-accent, #3c4d79);
    color: #fff;
    text-decoration: none;
}

/* Tag-style taxonomy fields (e.g. Listing Features) — render selected terms
   as separated pills so each tag is visually distinct. Toolset emits these
   as <a class="label label-default dashicons-before dashicons-no"> inside a
   .tagchecklist container; dashicons-no provides the × remove icon. */
.woocommerce-MyAccount-content .cred-form .tagchecklist {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
}

.woocommerce-MyAccount-content .cred-form .tagchecklist a.label,
.woocommerce-MyAccount-content .cred-form .tagchecklist a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px 4px 8px;
    margin: 0;
    background: #f1f3f7;
    color: #333;
    border: 1px solid #d8dde6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.woocommerce-MyAccount-content .cred-form .tagchecklist a.label:hover,
.woocommerce-MyAccount-content .cred-form .tagchecklist a:hover {
    background: #fde8eb;
    border-color: #ef4059;
    color: #8b1a28;
}

/* The dashicons × icon sits as ::before via .dashicons-before; size/colour it. */
.woocommerce-MyAccount-content .cred-form .tagchecklist a.dashicons-before::before {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    margin: 0;
    color: inherit;
    opacity: 0.55;
}

.woocommerce-MyAccount-content .cred-form .tagchecklist a.dashicons-before:hover::before {
    opacity: 1;
}

/* Field-level labels (excludes checkbox/radio item labels). */
.woocommerce-MyAccount-content .cred-form label:not(.wpt-form-checkbox-label):not(.wpt-form-radio-label) {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 19px;
    color: var(--mp-text, #222);
    line-height: 1.3;
}

/* Inputs, textareas, selects — consistent styling. */
.woocommerce-MyAccount-content .cred-form input[type="text"],
.woocommerce-MyAccount-content .cred-form input[type="email"],
.woocommerce-MyAccount-content .cred-form input[type="url"],
.woocommerce-MyAccount-content .cred-form input[type="tel"],
.woocommerce-MyAccount-content .cred-form input[type="number"],
.woocommerce-MyAccount-content .cred-form input[type="search"],
.woocommerce-MyAccount-content .cred-form textarea,
.woocommerce-MyAccount-content .cred-form select {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mp-text, #222);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce-MyAccount-content .cred-form input:focus,
.woocommerce-MyAccount-content .cred-form textarea:focus,
.woocommerce-MyAccount-content .cred-form select:focus {
    border-color: var(--mp-accent, #3c4d79);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-accent, #3c4d79) 15%, transparent);
    outline: none;
}

.woocommerce-MyAccount-content .cred-form textarea {
    min-height: 110px;
    resize: vertical;
}

/* CRED frequently emits empty <p> tags between fields — collapse them. */
.woocommerce-MyAccount-content .cred-form > p:empty,
.woocommerce-MyAccount-content .cred-form p:empty {
    display: none;
}

/* Logo image preview — constrain to a reasonable thumbnail size */
.wpt-credfile-preview-item img {
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid #e2e2e2;
    margin-bottom: 6px;
}

/* Multi-image gallery / repetitive file fields — grid of compact tiles.
   We match any js-wpt-repetitive that contains a file input, which is robust
   to whatever data-item_name Toolset emits for image-gallery fields. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(input[type="file"]):has(.js-wpt-drag, .wpt-repctrl-drag, [class*="drag"]) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 4px;
    align-items: start;
}

@media (max-width: 600px) {
    .woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(input[type="file"]):has(.js-wpt-drag, .wpt-repctrl-drag, [class*="drag"]) {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Each repetition (.wpt-repctl) is a transparent tile with controls overlaid
   on the thumbnail edges. Square aspect to match the single-image style.
   min-height:0 and overflow:hidden force aspect-ratio to win even when an
   image's natural height would otherwise stretch the box. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl,
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl-flex {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 6px;
}

/* The inner field area fills the slot so absolute children (preview, action)
   can position relative to the full tile bounds. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) .wpt-repetitive-field {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Image preview fills the square tile via absolute positioning so the img's
   natural aspect ratio doesn't extend the slot beyond aspect-ratio:1. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) .wpt-credfile-preview {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) .wpt-credfile-preview-item {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) .wpt-credfile-preview-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    margin: 0;
    border: 0;
    border-radius: 0;
    display: block;
}

/* Native file input — small text below the preview when no image is uploaded;
   hidden when there is a preview. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) input[type="file"] {
    width: 100%;
    font-size: 11px;
    padding: 4px 0 0;
    border: 0;
    background: transparent;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) .wpt-repctl:has(.wpt-credfile-preview-item) input[type="file"] {
    display: none;
}

/* Drag + trash icons overlay the top-left corner of the thumbnail. */
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repetitive-controls {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdrag,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdelete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex: 0 0 28px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
    transition: background 0.15s;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdrag,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdelete,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdrag::before,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdelete::before {
    color: #fff !important;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdrag::before,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdelete::before {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 1;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdrag:hover,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-repdelete:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* The × reset button (`.wpt-credfile-action`) overlays the top-right corner. */
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-credfile-action {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-credfile-action > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex: 0 0 28px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: background 0.15s;
}

.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-credfile-action > *:hover {
    background: rgba(239, 64, 89, 0.92);
    color: #fff;
}

/* Force the dashicon × glyph (rendered via ::before) to white. */
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-credfile-action > *,
.woocommerce-MyAccount-content .cred-form .wpt-repctl .wpt-credfile-action > *::before {
    color: #fff !important;
}

/* === Single-image fields (Featured Image, Logo, Header BG) ============= */

/* When a preview image is present: shrink wrapper to image width and overlay
   the × delete in the top-right corner — matching the gallery treatment. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) {
    position: relative;
    width: max-content;
    max-width: 100%;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) .wpt-credfile-preview-item img {
    border-radius: 6px;
    border: 1px solid #e2e2e2;
    display: block;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) > .wpt-credfile-action {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) > .wpt-credfile-action > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex: 0 0 28px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: background 0.15s;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) > .wpt-credfile-action > *:hover {
    background: rgba(239, 64, 89, 0.92);
    color: #fff;
}

/* Force the dashicon × glyph (rendered via ::before) to white. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) > .wpt-credfile-action > *,
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-credfile-preview-item img):not(:has(.wpt-repctl)) > .wpt-credfile-action > *::before {
    color: #fff !important;
}

/* When NO preview yet: style the bare file input as a subtle dropzone. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)):not(:has(.wpt-repctl)) input[type="file"] {
    display: block;
    width: 100%;
    max-width: 380px;
    padding: 14px 16px;
    background: #f5f6f8;
    border: 1px dashed #cbd1da;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)):not(:has(.wpt-repctl)) input[type="file"]:hover {
    background: #eef0f5;
    border-color: var(--mp-accent, #3c4d79);
}

/* "Add new" sibling button (Toolset emits this outside the repetitive wrapper). */
.woocommerce-MyAccount-content .cred-form .js-wpt-repctrl-add,
.woocommerce-MyAccount-content .cred-form .wpt-repctrl-add {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 14px;
    font-size: 13px;
}

/* "Add new" link — plain underlined link sitting on its own row below the
   gallery thumbnails. Clicking it inserts a new empty repetition (slot)
   that the user then clicks to pick a file. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .js-wpt-repadd,
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repadd {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 6px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--mp-accent, #3c4d79);
    text-decoration: underline;
}

/* Empty gallery repetitions (no preview image yet) render as dropzone tiles
   with a light grey background and a subtle white image icon. The native
   <input type="file"> is stretched to fill the tile invisibly so clicking
   anywhere on the slot opens the file picker. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)) {
    background: #eef1f5;
    border: 1px dashed #cbd1da;
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)):hover {
    background: #e3e8ef;
    border-color: var(--mp-accent, #3c4d79);
}

/* Inner field area fills the tile and centers content. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)) .wpt-repetitive-field {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Subtle white image-frame icon as the visual hint. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview))::before {
    content: "\f128";
    font-family: dashicons;
    font-size: 40px;
    color: #fff;
    opacity: 0.85;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* JS-rendered live preview overlay (gallery-preview.js) — fills the slot
   when a user has picked a file but the form hasn't been submitted yet. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl > .mp-live-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
}

.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl > .mp-live-preview img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
    border-radius: 0;
    margin: 0;
}

/* Stretch the file input across the tile (transparent) so the entire slot
   is clickable. The "Choose File" button becomes the whole surface. */
.woocommerce-MyAccount-content .cred-form .js-wpt-repetitive:has(.wpt-repdrag) > .wpt-repctl:not(:has(.wpt-credfile-preview-item img)):not(:has(.mp-live-preview)) input[type="file"] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* Taxonomy checkboxes rendered as pill chips.
   Hierarchical taxonomies: each top-level term sits in a flex row; its child
   terms stack beneath, left-aligned to the parent's left edge. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    column-count: initial;
    column-width: initial;
    column-gap: initial;
    columns: initial;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: flex-start;
}

/* Each direct <li> of the outer ul: top-level term pill or a tax-children-of-N
   wrapper that contains the nested children list. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes > li,
.woocommerce-MyAccount-content .wpt-form-set-checkboxes > .checkbox {
    list-style: none;
    margin: 0;
    padding: 0;
    break-inside: auto;
}

/* Each parent term takes a full row by default … */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes > li.checkbox {
    flex-basis: 100%;
    display: flex;
    align-items: center;
}

/* … unless the next sibling is a children-wrapper, in which case the parent
   shrinks to its content so the children sit on the same row. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes > li.checkbox:has(+ li[class*="tax-children-of-"]) {
    flex-basis: auto;
}

/* Children-wrapper sibling: takes remaining row space alongside its parent. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes > li[class*="tax-children-of-"] {
    flex-basis: auto;
    flex-grow: 1;
    min-width: 0;
}

/* Nested children list — flex row, left-aligned. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul.wpt-form-set-children {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul li,
.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul .checkbox {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Child term pills: smaller, with a tree connector. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul .wpt-form-checkbox-label {
    padding: 4px 12px;
    font-size: 12px;
    color: #555;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul .wpt-form-checkbox-label::before {
    content: "↳";
    margin-right: 4px;
    opacity: 0.55;
    font-size: 11px;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes ul .wpt-form-checkbox-label:has(input:checked) {
    color: #fff;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes .wpt-form-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    color: #333;
    background: #fff;
    border: 1px solid #ccd1da;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes .wpt-form-checkbox-label:hover {
    border-color: var(--mp-accent, #3c4d79);
    color: var(--mp-accent, #3c4d79);
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes .wpt-form-checkbox-label:has(input:checked) {
    background: var(--mp-accent, #3c4d79);
    border-color: var(--mp-accent, #3c4d79);
    color: #fff;
}

.woocommerce-MyAccount-content .wpt-form-set-checkboxes .wpt-form-checkbox-label:has(input:checked):hover {
    background: var(--mp-accent-hover, #2c3a5c);
    border-color: var(--mp-accent-hover, #2c3a5c);
    color: #fff;
}

/* Fallback for browsers without :has() — keyboard focus ring on the label. */
.woocommerce-MyAccount-content .wpt-form-set-checkboxes .wpt-form-checkbox-label:focus-within {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-accent, #3c4d79) 20%, transparent);
}

/* Submit button — match site navy */
.woocommerce-MyAccount-content .cred-form .btn-primary,
.woocommerce-MyAccount-content .cred-form input[type="submit"] {
    background-color: var(--mp-accent, #3c4d79);
    border-color: var(--mp-accent, #3c4d79);
    color: #ffffff !important;
    padding: 10px 28px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    margin-top: 8px;
}

.woocommerce-MyAccount-content .cred-form .btn-primary:hover,
.woocommerce-MyAccount-content .cred-form input[type="submit"]:hover {
    background-color: var(--mp-accent-hover, #2c3a5c);
    border-color: var(--mp-accent-hover, #2c3a5c);
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------------
   Account Details — Addresses Section
   --------------------------------------------------------------------------- */

/* All h2/h3 headings inside the account content area — override theme sizes */
.woocommerce-MyAccount-content h2 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 12px;
}

.woocommerce-MyAccount-content > h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Billing / Shipping column titles */
.woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-MyAccount-content .woocommerce-column__title {
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-bottom: 8px;
}

/* Edit address link next to headings */
.woocommerce-Address-title .edit {
    font-size: 13px;
    font-weight: 400;
    color: #7e7e7e;
    margin-left: 10px;
    text-decoration: none;
}

.woocommerce-Address-title .edit:hover {
    color: var(--mp-accent, #3c4d79);
    text-decoration: underline;
}

/* Address boxes */
.woocommerce-MyAccount-content .woocommerce-Address {
    background-color: #f5f5f5;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 20px 24px;
}

/* Validation errors surfaced by MP_Submission_Guard. A rejected submission must
   never be silent, so these are rendered by the plugin rather than relying on
   the theme having somewhere to put CRED's own message. */
.mp-validation-errors ul {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: disc;
}
.mp-validation-errors li { margin: 2px 0; }

/* Marks a compulsory field in its label, so the member knows before they start. */
.mp-required-star { color: #b32d2e; font-weight: 700; }

/* Inline "this field is required" message. Rendered by us rather than left to
   the browser's native bubble, which is generic and easily missed.

   `!important` is deliberate, not laziness. Measured on the live Around
   Hermitage form: this rule loaded and sat in the CSSOM exactly as authored,
   while the elements computed to the theme's body charcoal at weight 400 —
   a more specific theme selector wins on a plain <div> inside the form. The
   result was a message indistinguishable from ordinary helper text, which is
   the same silent failure as showing no message at all.

   The left border carries the meaning too. Colour alone would leave a
   colour-blind member with the same unmarked-looking text. */
.mp-required-error {
    margin: 4px 0 0;
    padding: 4px 0 4px 8px;
    border-left: 3px solid #b32d2e;
    color: #b32d2e !important;
    font-size: 0.9em;
    font-weight: 600 !important;
}

/* Summary directly under the submit button. The per-field messages can be a
   long way up the page; this one is where the member's eyes already are. */
.mp-required-summary {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-left: 3px solid #b32d2e;
    background: #fcf0f1;
    color: #b32d2e !important;
    font-weight: 600 !important;
}