/* ============================================================
   MICUENTA.CSS — Elegant B&W Clothing Store
   My Account dashboard with accordion sections
   Cormorant Garamond + DM Sans
   Scoped via .cc-account
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
    --black: #0a0a0a;
    --white: #ffffff;
    --off-white: #f7f7f5;
    --warm-gray: #9a9a97;
    --light-gray: #e8e8e6;
    --faint-gray: #f2f2f0;
    --serif: 'Cormorant Garamond', 'Georgia', serif;
    --sans: 'DM Sans', 'Helvetica Neue', sans-serif;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-med: 400ms cubic-bezier(0.16, 1, 0.3, 1);
    --max-w: 1320px;
}


/* ══════════════════════════════════════════════
   PAGE WRAPPER — break out of any parent overflow
══════════════════════════════════════════════ */
.cc-account {
    background: var(--white) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

    /* Kill old section/container styles inside account */
    .cc-account .section,
    .cc-account .section.cc-subscribe-form,
    .cc-account .container,
    .cc-account .container.cc-subscription-form {
        all: unset !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* ══════════════════════════════════════════════
   WELCOME HEADER — full bleed black bar
══════════════════════════════════════════════ */
    .cc-account .acct-header {
        background: var(--black) !important;
        padding: 60px 48px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .cc-account .acct-header-inner {
        max-width: var(--max-w) !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        flex-wrap: wrap !important;
    }

    .cc-account .acct-welcome,
    .cc-account .heading-jumbo-small {
        font-family: var(--serif) !important;
        font-size: clamp(28px, 4vw, 44px) !important;
        font-weight: 400 !important;
        font-style: italic !important;
        color: var(--white) !important;
        margin: 0 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.3px !important;
        overflow: visible !important;
    }

    .cc-account .acct-username {
        color: rgba(255, 255, 255, 0.45) !important;
        font-style: normal !important;
    }

    .cc-account .acct-logout,
    .cc-account .regalos_salir {
        font-family: var(--sans) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase !important;
        color: var(--white) !important;
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        border-radius: 0 !important;
        padding: 12px 28px !important;
        cursor: pointer !important;
        transition: background var(--transition-fast), border-color var(--transition-fast) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        flex-shrink: 0 !important;
    }

        .cc-account .acct-logout:hover,
        .cc-account .regalos_salir:hover {
            background: rgba(255, 255, 255, 0.1) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
        }


    /* ══════════════════════════════════════════════
   ACCORDION SECTIONS
══════════════════════════════════════════════ */
    .cc-account .acct-section {
        border-bottom: 1px solid var(--light-gray) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .cc-account .acct-section-inner {
        max-width: var(--max-w) !important;
        margin: 0 auto !important;
        padding: 0 48px !important;
        box-sizing: border-box !important;
    }

    /* ── Toggle header (clickable) ── */
    .cc-account .acct-section-head,
    .cc-account .acct-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 20px !important;
        padding: 28px 0 !important;
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        transition: padding var(--transition-med) !important;
    }

        .cc-account .acct-toggle:hover .acct-section-title {
            color: var(--warm-gray) !important;
        }

    .cc-account .acct-toggle--open {
        padding-bottom: 24px !important;
        border-bottom: 1px solid var(--light-gray) !important;
        margin-bottom: 0 !important;
    }

    .cc-account .acct-section-title,
    .cc-account .my_acount_text_titles {
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase !important;
        color: var(--black) !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        transition: color var(--transition-fast) !important;
    }

    /* Right side: edit button + chevron */
    .cc-account .acct-head-actions {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        flex-shrink: 0 !important;
    }

    /* Chevron indicator */
    .cc-account .acct-chevron {
        display: block !important;
        width: 14px !important;
        height: 14px !important;
        flex-shrink: 0 !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a97' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        transition: transform 300ms var(--ease-out) !important;
    }

    .cc-account .acct-chevron--open {
        transform: rotate(180deg) !important;
    }

    /* Edit button */
    .cc-account .acct-edit-btn,
    .cc-account .account_editar {
        font-family: var(--sans) !important;
        font-size: 10px !important;
        font-weight: 500 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--warm-gray) !important;
        background: transparent !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 0 !important;
        padding: 8px 20px !important;
        cursor: pointer !important;
        transition: color var(--transition-fast), border-color var(--transition-fast) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

        .cc-account .acct-edit-btn:hover,
        .cc-account .account_editar:hover {
            color: var(--black) !important;
            border-color: var(--black) !important;
        }

    /* ── Collapsible body ── */
    .cc-account .acct-section-body,
    .cc-account .acct-collapsible {
        padding: 32px 0 40px !important;
        overflow: hidden !important;
    }


    /* ══════════════════════════════════════════════
   FORMS — LABELS
══════════════════════════════════════════════ */
    .cc-account label,
    .cc-account .acct-label {
        font-family: var(--sans) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: var(--black) !important;
        display: block !important;
        margin: 20px 0 10px 0 !important;
        padding: 0 !important;
        font-style: normal !important;
        line-height: 1.4 !important;
        width: auto !important;
        background: none !important;
        border: none !important;
    }

    .cc-account .acct-section-body .acct-field:first-child label,
    .cc-account .acct-section-body .contact-name-field-wrap:first-child label {
        margin-top: 0 !important;
    }


    /* ══════════════════════════════════════════════
   FORMS — INPUTS
══════════════════════════════════════════════ */
    .cc-account input[type="text"],
    .cc-account input[type="password"],
    .cc-account input[type="email"],
    .cc-account .acct-input,
    .cc-account .text-field,
    .cc-account .text-field.cc-contact-field,
    .cc-account .text-field.cc-contact-field.w-input,
    .cc-account input.w-input {
        width: 100% !important;
        max-width: none !important;
        height: 50px !important;
        padding: 0 18px !important;
        background: var(--white) !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 0 !important;
        font-family: var(--sans) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        color: var(--black) !important;
        transition: border-color var(--transition-fast) !important;
        box-sizing: border-box !important;
        display: block !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        float: none !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

        .cc-account input[type="text"]:disabled,
        .cc-account input[type="password"]:disabled {
            background: var(--faint-gray) !important;
            color: var(--warm-gray) !important;
            border-color: var(--faint-gray) !important;
            cursor: default !important;
        }

        .cc-account input[type="text"]::placeholder,
        .cc-account input[type="password"]::placeholder {
            color: #c0c0be !important;
            font-weight: 300 !important;
        }

        .cc-account input[type="text"]:focus,
        .cc-account input[type="password"]:focus {
            outline: none !important;
            border-color: var(--black) !important;
        }

    .cc-account select,
    .cc-account .acct-addr-select {
        width: 100% !important;
        max-width: none !important;
        height: 50px !important;
        padding: 0 48px 0 18px !important;
        background: var(--white) !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 0 !important;
        font-family: var(--sans) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: var(--black) !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9a97' stroke-width='1.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 18px center !important;
        transition: border-color var(--transition-fast) !important;
        box-sizing: border-box !important;
        display: block !important;
        margin: 0 !important;
        outline: none !important;
    }


    /* ══════════════════════════════════════════════
   FORMS — FIELD GROUPS
══════════════════════════════════════════════ */
    .cc-account .get-in-touch-form-wrap,
    .cc-account .w-form,
    .cc-account .acct-form {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 600px !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .cc-account .credentials-inputs-wrap,
    .cc-account .contact-name-field-wrap,
    .cc-account .acct-field {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }


    /* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
    .cc-account .button.w-button,
    .cc-account input[type="button"].button,
    .cc-account input[type="button"].w-button,
    .cc-account .acct-btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        padding: 0 40px !important;
        background: var(--black) !important;
        color: var(--white) !important;
        border: 1px solid var(--black) !important;
        border-radius: 0 !important;
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        cursor: pointer !important;
        transition: background var(--transition-fast), color var(--transition-fast), letter-spacing 400ms var(--ease-out) !important;
        width: auto !important;
        max-width: none !important;
        margin-top: 8px !important;
        margin-right: 12px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        box-shadow: none !important;
        float: none !important;
    }

        .cc-account .button.w-button:hover,
        .cc-account input[type="button"].button:hover,
        .cc-account .acct-btn-primary:hover {
            background: var(--white) !important;
            color: var(--black) !important;
            letter-spacing: 4px !important;
        }

    .cc-account .acct-btn-secondary {
        background: transparent !important;
        color: var(--black) !important;
        border: 1px solid var(--light-gray) !important;
    }

        .cc-account .acct-btn-secondary:hover {
            border-color: var(--black) !important;
            background: transparent !important;
            color: var(--black) !important;
        }

    .cc-account .acct-btn-row {
        display: flex !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        margin-top: 24px !important;
    }

    /* Change password link */
    .cc-account .acct-change-pass,
    .cc-account .recuperate-password {
        font-family: var(--sans) !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        color: var(--warm-gray) !important;
        text-decoration: none !important;
        display: inline-block !important;
        margin-top: 20px !important;
        transition: color var(--transition-fast) !important;
        position: relative !important;
        cursor: pointer !important;
    }

        .cc-account .acct-change-pass:hover,
        .cc-account .recuperate-password:hover {
            color: var(--black) !important;
        }

        .cc-account .acct-change-pass::after,
        .cc-account .recuperate-password::after {
            content: '' !important;
            position: absolute !important;
            bottom: -2px !important;
            left: 0 !important;
            width: 100% !important;
            height: 1px !important;
            background: currentColor !important;
            transform: scaleX(0) !important;
            transform-origin: right !important;
            transition: transform 300ms var(--ease-out) !important;
        }

        .cc-account .acct-change-pass:hover::after,
        .cc-account .recuperate-password:hover::after {
            transform: scaleX(1) !important;
            transform-origin: left !important;
        }


    /* ══════════════════════════════════════════════
   ORDERS TABLE
══════════════════════════════════════════════ */
    .cc-account .acct-orders-table,
    .cc-account .tabla_regalos {
        width: 100% !important;
        border-collapse: collapse !important;
        font-family: var(--sans) !important;
    }

        .cc-account .acct-orders-table th,
        .cc-account .tabla_regalos th {
            font-family: var(--sans) !important;
            font-size: 10px !important;
            font-weight: 600 !important;
            letter-spacing: 2px !important;
            text-transform: uppercase !important;
            color: var(--warm-gray) !important;
            text-align: left !important;
            padding: 14px 16px !important;
            border-bottom: 1px solid var(--light-gray) !important;
            background: none !important;
        }

        .cc-account .acct-orders-table td,
        .cc-account .tabla_regalos td,
        .cc-account .account_txt {
            font-family: var(--sans) !important;
            font-size: 13.5px !important;
            font-weight: 400 !important;
            color: var(--black) !important;
            padding: 18px 16px !important;
            border-bottom: 1px solid var(--faint-gray) !important;
            vertical-align: middle !important;
            background: none !important;
        }

        .cc-account .acct-orders-table tr:last-child td,
        .cc-account .tabla_regalos tr:last-child td {
            border-bottom: none !important;
        }

        .cc-account .acct-orders-table tbody tr:hover td,
        .cc-account .tabla_regalos tbody tr:hover td {
            background: var(--faint-gray) !important;
        }

    .cc-account .acct-order-view a,
    .cc-account .account_ver a {
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--black) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: color var(--transition-fast) !important;
    }

        .cc-account .acct-order-view a:hover,
        .cc-account .account_ver a:hover {
            color: var(--warm-gray) !important;
        }

    .cc-account .fa.fa-search-plus {
        display: none !important;
    }


    /* ══════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════ */
    .cc-account .acct-empty,
    .cc-account .w-commerce-commercecartemptystate {
        padding: 40px 0 !important;
        text-align: center !important;
        background: none !important;
        border: none !important;
    }

        .cc-account .acct-empty-text,
        .cc-account .w-commerce-commercecartemptystate div {
            font-family: var(--sans) !important;
            font-size: 14px !important;
            font-weight: 300 !important;
            color: var(--warm-gray) !important;
            margin: 0 !important;
        }

    .cc-account .acct-shop-btn,
    .cc-account .btn_seguir_comprando {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
        padding: 0 40px !important;
        background: var(--black) !important;
        color: var(--white) !important;
        border: 1px solid var(--black) !important;
        border-radius: 0 !important;
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        letter-spacing: 3px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: background var(--transition-fast), color var(--transition-fast), letter-spacing 400ms var(--ease-out) !important;
        margin-top: 16px !important;
    }

        .cc-account .acct-shop-btn:hover,
        .cc-account .btn_seguir_comprando:hover {
            background: var(--white) !important;
            color: var(--black) !important;
            letter-spacing: 4px !important;
        }


    /* ══════════════════════════════════════════════
   ADDRESS CARDS
══════════════════════════════════════════════ */
    .cc-account .acct-address,
    .cc-account .micuenta_direc {
        border: 1px solid var(--light-gray) !important;
        margin-bottom: 16px !important;
        transition: border-color var(--transition-fast) !important;
        background: var(--white) !important;
    }

        .cc-account .acct-address:hover,
        .cc-account .micuenta_direc:hover {
            border-color: var(--black) !important;
        }

    .cc-account .acct-address-card,
    .cc-account .micuenta_direccion_gral {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 20px !important;
        padding: 28px 32px !important;
    }

    .cc-account .acct-address-info,
    .cc-account .micuenta_direccion_desc {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        font-family: var(--sans) !important;
        font-size: 13px !important;
        font-weight: 300 !important;
        color: var(--warm-gray) !important;
        line-height: 1.7 !important;
    }

    .cc-account .acct-address-name,
    .cc-account .micuenta_direccion_tit {
        font-family: var(--sans) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--black) !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    .cc-account .acct-address-detail {
        display: block !important;
    }

    .cc-account .acct-address-edit,
    .cc-account .micuenta_direccion_edit {
        cursor: pointer !important;
        padding: 8px !important;
        flex-shrink: 0 !important;
        transition: opacity var(--transition-fast) !important;
        opacity: 0.4 !important;
    }

        .cc-account .acct-address-edit:hover,
        .cc-account .micuenta_direccion_edit:hover {
            opacity: 1 !important;
        }

    .cc-account .acct-address-edit-icon,
    .cc-account .micuenta_direccion_edit_icon {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }


    /* ══════════════════════════════════════════════
   ADDRESS EDIT FORM
══════════════════════════════════════════════ */
    .cc-account .acct-address-form,
    .cc-account .micuenta_direccion_form {
        padding: 28px 32px !important;
        border-top: 1px solid var(--light-gray) !important;
        background: var(--faint-gray) !important;
    }

    .cc-account .acct-addr-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        margin: 12px 0 !important;
    }

    .cc-account .acct-addr-input,
    .cc-account .micuenta_direc_form {
        width: 100% !important;
        max-width: none !important;
        height: 46px !important;
        padding: 0 16px !important;
        background: var(--white) !important;
        border: 1px solid var(--light-gray) !important;
        border-radius: 0 !important;
        font-family: var(--sans) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        color: var(--black) !important;
        box-sizing: border-box !important;
        display: block !important;
        outline: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        margin: 0 0 12px 0 !important;
        transition: border-color var(--transition-fast) !important;
    }

        .cc-account .acct-addr-input:focus,
        .cc-account .micuenta_direc_form:focus {
            border-color: var(--black) !important;
        }

        .cc-account .acct-addr-input::placeholder,
        .cc-account .micuenta_direc_form::placeholder {
            color: #c0c0be !important;
            font-weight: 300 !important;
        }

    .cc-account .acct-addr-grid .acct-addr-input,
    .cc-account .acct-addr-grid .micuenta_direc_form {
        margin-bottom: 0 !important;
    }

    .cc-account .acct-addr-actions {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin-top: 20px !important;
        flex-wrap: wrap !important;
    }

    .cc-account .acct-addr-btn-save,
    .cc-account .micuenta_direc_btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 44px !important;
        padding: 0 32px !important;
        background: var(--black) !important;
        color: var(--white) !important;
        border: 1px solid var(--black) !important;
        font-family: var(--sans) !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        letter-spacing: 2.5px !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: background var(--transition-fast), color var(--transition-fast) !important;
    }

        .cc-account .acct-addr-btn-save:hover,
        .cc-account .micuenta_direc_btn:hover {
            background: var(--white) !important;
            color: var(--black) !important;
        }

    .cc-account .acct-addr-btn-cancel,
    .cc-account .micuenta_direc_btn_cancel {
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: var(--warm-gray) !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: color var(--transition-fast) !important;
    }

        .cc-account .acct-addr-btn-cancel:hover,
        .cc-account .micuenta_direc_btn_cancel:hover {
            color: var(--black) !important;
        }

    .cc-account .acct-addr-btn-delete,
    .cc-account .micuenta_direc_btn_delete {
        font-family: var(--sans) !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #c44 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        transition: color var(--transition-fast) !important;
    }

        .cc-account .acct-addr-btn-delete:hover,
        .cc-account .micuenta_direc_btn_delete:hover {
            color: #a00 !important;
        }


/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════════════ */
@media screen and (max-width: 1024px) {
    .cc-account .acct-header {
        padding: 48px 28px !important;
    }

    .cc-account .acct-section-inner {
        padding: 0 28px !important;
    }
}

@media screen and (max-width: 767px) {
    .cc-account .acct-header {
        padding: 36px 20px !important;
    }

    .cc-account .acct-header-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .cc-account .acct-welcome {
        font-size: 28px !important;
    }

    .cc-account .acct-section-inner {
        padding: 0 20px !important;
    }

    .cc-account .acct-section-head {
        padding: 24px 0 !important;
    }

    .cc-account .acct-section-body {
        padding: 24px 0 32px !important;
    }

    .cc-account .acct-form {
        max-width: none !important;
    }

    .cc-account input[type="text"],
    .cc-account input[type="password"],
    .cc-account .text-field {
        height: 48px !important;
        font-size: 16px !important;
    }

    .cc-account .acct-orders-table thead,
    .cc-account .tabla_regalos thead {
        display: none !important;
    }

    .cc-account .acct-orders-table tr,
    .cc-account .tabla_regalos tr {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid var(--faint-gray) !important;
        gap: 4px 16px !important;
    }

    .cc-account .acct-orders-table td,
    .cc-account .tabla_regalos td {
        border-bottom: none !important;
        padding: 2px 0 !important;
    }

    .cc-account .acct-address-card,
    .cc-account .micuenta_direccion_gral {
        padding: 20px !important;
    }

    .cc-account .acct-address-form,
    .cc-account .micuenta_direccion_form {
        padding: 20px !important;
    }

    .cc-account .acct-addr-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

        .cc-account .acct-addr-grid .acct-addr-input,
        .cc-account .acct-addr-grid .micuenta_direc_form {
            margin-bottom: 12px !important;
        }

    .cc-account .button.w-button,
    .cc-account input[type="button"].button {
        height: 48px !important;
        font-size: 10px !important;
        letter-spacing: 2.5px !important;
    }
}

@media screen and (max-width: 479px) {
    .cc-account .acct-header {
        padding: 28px 16px !important;
    }

    .cc-account .acct-section-inner {
        padding: 0 16px !important;
    }

    .cc-account .acct-welcome {
        font-size: 24px !important;
    }

    .cc-account .acct-address-card,
    .cc-account .micuenta_direccion_gral {
        padding: 16px !important;
    }

    .cc-account .acct-address-form,
    .cc-account .micuenta_direccion_form {
        padding: 16px !important;
    }
}

/* ============================================================
   MICUENTA FIXES — paste at bottom of micuenta.css
   Fix 1: uncrop the black welcome bar
   Fix 2: accordion sections fill remaining viewport height
   ============================================================ */


/* ── FIX 1: Uncrop the black header ─────────────────────────
   The bleed-out trick (100vw + negative margins) only works
   if every ancestor allows overflow. Webflow sections set
   overflow:hidden by default, which clips the bar.
   We force the chain open.
   ─────────────────────────────────────────────────────────── */

/* Force every ancestor inside Webflow to not clip */
.cc-account,
.cc-account *,
.w-section,
.section {
    overflow: visible !important;
}

    /* The header itself — make absolutely sure it can breathe */
    .cc-account .acct-header {
        overflow: visible !important;
        position: relative !important;
        z-index: 2 !important;
        /* Extra safety: clip-path and mask can also crop — clear them */
        clip-path: none !important;
        -webkit-clip-path: none !important;
        mask: none !important;
        -webkit-mask: none !important;
    }

    .cc-account .acct-header-inner {
        overflow: visible !important;
        clip-path: none !important;
    }

    /* The welcome text itself — some themes set line-height or
   max-height that clips descenders/ascenders              */
    .cc-account .acct-welcome,
    .cc-account .heading-jumbo-small {
        overflow: visible !important;
        line-height: 1.3 !important; /* slightly more room */
        max-height: none !important;
        -webkit-line-clamp: unset !important;
    }


/* ── FIX 2: Sections fill remaining white space ──────────────
   Turn .cc-account into a flex column. The header stays its
   natural height; the sections zone grows to fill the rest.
   ─────────────────────────────────────────────────────────── */

.cc-account {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

    /* The Webflow section/container wrapping the accordion rows
   must grow to consume leftover space                       */
    .cc-account .section,
    .cc-account .container,
    .cc-account .acct-sections-wrap {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Each .acct-section keeps its natural height EXCEPT the
   very last one, which stretches to fill whatever remains  */
    .cc-account .acct-section:last-of-type {
        flex: 1 !important;
    }