/*
 * Thuthi Custom Account — account.css  v2
 *
 * THEME OVERRIDE STRATEGY:
 * All rules scoped under #ta-account-root (or .ta-modal-overlay)
 * AND use !important on every visual/layout property so that
 * ecogrow-custom-inline-css, style.scss, and any other theme
 * stylesheet cannot win the specificity battle.
 */

/* ═══════════════════════════════════════════════════
   0. TOKENS — scoped so they don't pollute :root
═══════════════════════════════════════════════════ */
#ta-account-root,
.ta-modal-overlay {
    --ta-green:         #1e5c38;
    --ta-green-dark:    #174a2e;
    --ta-green-light:   #eaf3ed;
    --ta-green-badge:   #c8e6d4;
    --ta-text:          #111827;
    --ta-text-muted:    #6b7280;
    --ta-text-label:    #9ca3af;
    --ta-bg:            #f3f4f6;
    --ta-white:         #ffffff;
    --ta-border:        #e5e7eb;
    --ta-field-bg:      #f9fafb;
    --ta-red:           #dc2626;
    --ta-red-light:     #fef2f2;
    --ta-red-border:    #fca5a5;
    --ta-yellow:        #d97706;
    --ta-yellow-light:  #fffbeb;
    --ta-blue:          #2563eb;
    --ta-blue-light:    #eff6ff;
    --ta-radius:        0;
    --ta-shadow-card:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
    --ta-shadow-modal:  0 20px 60px rgba(0,0,0,.25);
}

#ta-account-root {
    width: 100% !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ═══════════════════════════════════════════════════
   1. BOX-SIZING RESET inside wrapper
═══════════════════════════════════════════════════ */
#ta-account-root *,
#ta-account-root *::before,
#ta-account-root *::after,
.ta-modal-overlay *,
.ta-modal-overlay *::before,
.ta-modal-overlay *::after {
    box-sizing: border-box !important;
}

/* ── Suppress EVERY theme-injected arrow on any select wrapper ── */
#ta-account-root .select_container::before,
#ta-account-root .select_container::after,
.ta-modal-overlay .select_container::before,
.ta-modal-overlay .select_container::after,
/* Also nuke pseudo-elements on the select-wrap itself */
#ta-account-root .ta-select-wrap::before,
#ta-account-root .ta-select-wrap::after,
.ta-modal-overlay .ta-select-wrap::before,
.ta-modal-overlay .ta-select-wrap::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
}

/* Force .select_container (injected by theme) to be a transparent passthrough —
   display:block + full dimensions so the <select> inside remains visible */
#ta-account-root .ta-select-wrap .select_container,
.ta-modal-overlay .ta-select-wrap .select_container {
    display:    block !important;
    width:      100% !important;
    height:     auto !important;
    min-height: 0 !important;
    padding:    0 !important;
    margin:     0 !important;
    border:     none !important;
    background: none !important;
    position:   static !important;
    overflow:   visible !important;
}

/* Ensure the <select> inside .select_container fills the cell normally */
#ta-account-root .ta-select-wrap .select_container select,
.ta-modal-overlay .ta-select-wrap .select_container select {
    display:    block !important;
    width:      100% !important;
    height:     auto !important;
    min-height: 0 !important;
    visibility: visible !important;
    opacity:    1 !important;
}

/* Hide only true non-select injected siblings (icons, spans) that are
   DIRECT children of .ta-select-wrap — not the .select_container itself */
#ta-account-root .ta-select-wrap > *:not(select):not(.ta-select-arrow):not(.select_container),
.ta-modal-overlay .ta-select-wrap > *:not(select):not(.ta-select-arrow):not(.select_container) {
    display: none !important;
}
#ta-account-root .ta-select-arrow,
.ta-modal-overlay .ta-select-arrow {
    position: absolute !important;
    right: 11px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    height: 14px !important;
    stroke: var(--ta-text-muted) !important;
    fill: none !important;
    pointer-events: none !important;
    display: block !important;
    z-index: 2 !important;
}

/* ═══════════════════════════════════════════════════
   2. HERO
═══════════════════════════════════════════════════ */
#ta-account-root .ta-hero {
    position: relative !important;
    min-height: 185px !important;
    background-color: #1a2e1f !important;
    background-image: linear-gradient(135deg,rgba(10,28,16,.88) 0%,rgba(25,55,30,.78) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#ta-account-root .ta-hero__inner {
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
    padding: 48px 20px !important;
}
#ta-account-root .ta-hero__title {
    font-size: 2.8rem !important;
    font-weight: 700 !important;
    letter-spacing: .2em !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    background: none !important;
}
#ta-account-root .ta-breadcrumb {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,.72) !important;
    font-size: .85rem !important;
    margin: 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-breadcrumb a {
    color: rgba(255,255,255,.72) !important;
    text-decoration: none !important;
}
#ta-account-root .ta-breadcrumb a:hover { color: #fff !important; }
#ta-account-root .ta-breadcrumb__sep { opacity: .5 !important; }

/* ═══════════════════════════════════════════════════
   3. MAIN LAYOUT
═══════════════════════════════════════════════════ */
#ta-account-root .ta-main {
    padding: 40px 0 72px !important;
    margin: 0 !important;
    width: 100% !important;
    flex: 1 !important;          /* grow to fill remaining height of the flex column */
}
#ta-account-root .ta-container {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
    width: 100% !important;
}
#ta-account-root .ta-layout {
    display: grid !important;
    grid-template-columns: 258px 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
}
@media (max-width: 860px) {
    #ta-account-root .ta-layout { grid-template-columns: 1fr !important; }
    #ta-account-root .ta-hero__title { font-size: 1.5rem !important; }
    #ta-account-root .ta-container { padding: 0 16px !important; }
}

/* ═══════════════════════════════════════════════════
   4. SIDEBAR
═══════════════════════════════════════════════════ */
#ta-account-root .ta-sidebar {
    background: var(--ta-white) !important;
    border-radius: var(--ta-radius) !important;
    box-shadow: var(--ta-shadow-card) !important;
    overflow: hidden !important;
    border: 1px solid var(--ta-border) !important;
}
#ta-account-root .ta-sidebar__nav {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#ta-account-root .ta-nav-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    text-decoration: none !important;
    color: var(--ta-text) !important;
    font-size: .895rem !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 1px solid var(--ta-border) !important;
    background: var(--ta-white) !important;
    transition: background .12s, color .12s !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
#ta-account-root .ta-nav-item:last-child { border-bottom: none !important; }
#ta-account-root .ta-nav-item:hover { background: #f9fafb !important; color: var(--ta-text) !important; }
#ta-account-root .ta-nav-item--active {
    color: var(--ta-green) !important;
    background: var(--ta-green-light) !important;
    font-weight: 600 !important;
}
#ta-account-root .ta-nav-item--active:hover {
    background: var(--ta-green-light) !important;
    color: var(--ta-green) !important;
}
#ta-account-root .ta-nav-icon {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
    stroke: var(--ta-text-muted) !important;
    fill: none !important;
    display: block !important;
}
#ta-account-root .ta-nav-item--active .ta-nav-icon { stroke: var(--ta-green) !important; }
#ta-account-root .ta-nav-arrow {
    width: 15px !important;
    height: 15px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    stroke: #d1d5db !important;
    fill: none !important;
    display: block !important;
}
#ta-account-root .ta-nav-item--active .ta-nav-arrow { stroke: var(--ta-green) !important; }
#ta-account-root .ta-nav-item--signout { color: var(--ta-red) !important; }
#ta-account-root .ta-nav-item--signout .ta-nav-icon { stroke: var(--ta-red) !important; }
#ta-account-root .ta-nav-item--signout:hover { background: #fff5f5 !important; }

/* ═══════════════════════════════════════════════════
   5. CONTENT PANEL
═══════════════════════════════════════════════════ */
#ta-account-root .ta-content { min-width: 0 !important; }
#ta-account-root .ta-section {
    background: var(--ta-white) !important;
    border-radius: var(--ta-radius) !important;
    box-shadow: var(--ta-shadow-card) !important;
    border: 1px solid var(--ta-border) !important;
    padding: 32px 36px !important;
    margin: 0 !important;
}
#ta-account-root .ta-section__head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-section__title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ta-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: none !important;
}

/* ═══════════════════════════════════════════════════
   6. BUTTONS
═══════════════════════════════════════════════════ */
#ta-account-root .ta-btn,
.ta-modal-overlay .ta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 18px !important;
    border-radius: 5px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .12s, color .12s, border-color .12s !important;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: none !important;
    border: 1.5px solid transparent !important;
    vertical-align: middle !important;
}
#ta-account-root .ta-btn svg,
.ta-modal-overlay .ta-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    fill: none !important;
    display: block !important;
}
#ta-account-root .ta-btn--primary,
.ta-modal-overlay .ta-btn--primary {
    background: var(--ta-green) !important;
    color: #ffffff !important;
    border-color: var(--ta-green) !important;
}
#ta-account-root .ta-btn--primary:hover,
.ta-modal-overlay .ta-btn--primary:hover {
    background: var(--ta-green-dark) !important;
    border-color: var(--ta-green-dark) !important;
    color: #ffffff !important;
}
#ta-account-root .ta-btn--outline,
.ta-modal-overlay .ta-btn--outline {
    background: transparent !important;
    color: var(--ta-text) !important;
    border-color: var(--ta-border) !important;
}
#ta-account-root .ta-btn--outline:hover,
.ta-modal-overlay .ta-btn--outline:hover {
    border-color: var(--ta-green) !important;
    color: var(--ta-green) !important;
    background: transparent !important;
}
#ta-account-root .ta-btn--ghost,
.ta-modal-overlay .ta-btn--ghost {
    background: transparent !important;
    color: var(--ta-text-muted) !important;
    border-color: var(--ta-border) !important;
}
#ta-account-root .ta-btn--ghost:hover,
.ta-modal-overlay .ta-btn--ghost:hover {
    color: var(--ta-text) !important;
    border-color: #9ca3af !important;
    background: transparent !important;
}
#ta-account-root .ta-btn--danger,
.ta-modal-overlay .ta-btn--danger {
    background: transparent !important;
    color: var(--ta-red) !important;
    border-color: var(--ta-red-border) !important;
}
#ta-account-root .ta-btn--danger:hover,
.ta-modal-overlay .ta-btn--danger:hover {
    background: var(--ta-red-light) !important;
}
#ta-account-root .ta-btn--sm,
.ta-modal-overlay .ta-btn--sm {
    padding: 6px 13px !important;
    font-size: .8rem !important;
}
#ta-account-root .ta-btn:disabled,
.ta-modal-overlay .ta-btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* ═══════════════════════════════════════════════════
   7. FORM — Labels, inputs, fields
═══════════════════════════════════════════════════ */
#ta-account-root .ta-fields-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 28px !important;
}
@media (max-width: 600px) {
    #ta-account-root .ta-fields-grid { grid-template-columns: 1fr !important; }
}
#ta-account-root .ta-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-field-group--full { grid-column: 1 / -1 !important; }
#ta-account-root .ta-field-display {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
#ta-account-root .ta-field-display--full { grid-column: 1 / -1 !important; }

#ta-account-root .ta-label,
.ta-modal-overlay .ta-label {
    display: block !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    color: var(--ta-text-muted) !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
#ta-account-root .ta-label--req::after,
.ta-modal-overlay .ta-label--req::after {
    content: ' *' !important;
    color: var(--ta-red) !important;
}
#ta-account-root .ta-field-label {
    font-size: .7rem !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    color: var(--ta-text-label) !important;
    text-transform: uppercase !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-field-value {
    padding: 10px 14px !important;
    background: var(--ta-field-bg) !important;
    border: 1px solid var(--ta-border) !important;
    border-radius: 6px !important;
    font-size: .9rem !important;
    color: var(--ta-text) !important;
    min-height: 42px !important;
    line-height: 1.5 !important;
    display: block !important;
    margin: 0 !important;
}
#ta-account-root .ta-input,
.ta-modal-overlay .ta-input {
    display: block !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1px solid var(--ta-border) !important;
    border-radius: 6px !important;
    font-size: .9rem !important;
    color: var(--ta-text) !important;
    background: var(--ta-white) !important;
    transition: border-color .12s !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    height: auto !important;
}
#ta-account-root .ta-input:focus,
.ta-modal-overlay .ta-input:focus {
    border-color: var(--ta-green) !important;
    outline: none !important;
    box-shadow: none !important;
}
#ta-account-root .ta-input:disabled,
#ta-account-root .ta-input[readonly],
.ta-modal-overlay .ta-input:disabled,
.ta-modal-overlay .ta-input[readonly] {
    background: var(--ta-field-bg) !important;
    color: var(--ta-text-muted) !important;
    cursor: default !important;
}
#ta-account-root .ta-select-wrap,
.ta-modal-overlay .ta-select-wrap {
    position: relative !important;
    display: block !important;
}
#ta-account-root .ta-select,
.ta-modal-overlay .ta-select {
    padding-right: 36px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    background: var(--ta-white) !important;
}
#ta-account-root .ta-profile-actions {
    display: flex !important;
    gap: 10px !important;
    margin: 28px 0 0 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════
   8. CHECKBOX
═══════════════════════════════════════════════════ */
#ta-account-root .ta-checkbox-label,
.ta-modal-overlay .ta-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-checkbox-input,
.ta-modal-overlay .ta-checkbox-input { display: none !important; }
#ta-account-root .ta-checkbox-custom,
.ta-modal-overlay .ta-checkbox-custom {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--ta-border) !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--ta-white) !important;
    transition: background .12s, border-color .12s !important;
    margin-top: 2px !important;
}
#ta-account-root .ta-checkbox-custom svg,
.ta-modal-overlay .ta-checkbox-custom svg {
    width: 11px !important;
    height: 11px !important;
    stroke: #fff !important;
    fill: none !important;
    display: none !important;
}
#ta-account-root .ta-checkbox-input:checked + .ta-checkbox-custom,
.ta-modal-overlay .ta-checkbox-input:checked + .ta-checkbox-custom {
    background: var(--ta-green) !important;
    border-color: var(--ta-green) !important;
}
#ta-account-root .ta-checkbox-input:checked + .ta-checkbox-custom svg,
.ta-modal-overlay .ta-checkbox-input:checked + .ta-checkbox-custom svg { display: block !important; }
#ta-account-root .ta-checkbox-text,
.ta-modal-overlay .ta-checkbox-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
#ta-account-root .ta-checkbox-text strong,
.ta-modal-overlay .ta-checkbox-text strong {
    font-size: .9rem !important;
    font-weight: 600 !important;
    color: var(--ta-text) !important;
    display: block !important;
}
#ta-account-root .ta-checkbox-text small,
.ta-modal-overlay .ta-checkbox-text small {
    font-size: .8rem !important;
    color: var(--ta-text-muted) !important;
    display: block !important;
    font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════
   9. ADDRESS CARDS
═══════════════════════════════════════════════════ */
#ta-account-root .ta-addresses-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 680px) {
    #ta-account-root .ta-addresses-grid { grid-template-columns: 1fr !important; }
}
#ta-account-root .ta-no-data {
    color: var(--ta-text-muted) !important;
    font-size: .9rem !important;
    padding: 24px 0 !important;
    margin: 0 !important;
}
#ta-account-root .ta-address-card {
    border: 1.5px solid var(--ta-border) !important;
    border-radius: var(--ta-radius) !important;
    padding: 20px !important;
    position: relative !important;
    background: var(--ta-white) !important;
    transition: box-shadow .12s !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}
#ta-account-root .ta-address-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.1) !important;
}
#ta-account-root .ta-address-card--default {
    border-color: var(--ta-green) !important;
    background: var(--ta-green-light) !important;
}
#ta-account-root .ta-default-badge {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: none !important;
    color: var(--ta-green) !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
}
#ta-account-root .ta-address-card__header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-address-icon {
    width: 36px !important;
    height: 36px !important;
    background: var(--ta-green) !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#ta-account-root .ta-address-icon svg {
    width: 17px !important;
    height: 17px !important;
    stroke: #ffffff !important;
    fill: none !important;
    display: block !important;
}
#ta-account-root .ta-address-label {
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--ta-text) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: block !important;
}
#ta-account-root .ta-address-card__body {
    flex: 1 !important;
    margin: 0 0 16px 0 !important;
}
#ta-account-root .ta-address-contact {
    font-weight: 700 !important;
    font-size: .875rem !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    color: var(--ta-text) !important;
}
#ta-account-root .ta-address-line {
    font-size: .84rem !important;
    color: var(--ta-text-muted) !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
#ta-account-root .ta-address-phone {
    font-size: .84rem !important;
    color: var(--ta-text-muted) !important;
    margin: 0 !important;
    padding: 0 !important;
}
#ta-account-root .ta-address-card__actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════
   10. ORDER HISTORY
═══════════════════════════════════════════════════ */
#ta-account-root .ta-section__head--orders { margin-bottom: 20px !important; }
#ta-account-root .ta-order-tabs {
    display: flex !important;
    gap: 8px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}
#ta-account-root .ta-order-tab {
    padding: 8px 18px !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--ta-border) !important;
    background: var(--ta-white) !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: var(--ta-text-muted) !important;
    cursor: pointer !important;
    transition: background .12s, color .12s, border-color .12s !important;
    font-family: inherit !important;
    line-height: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#ta-account-root .ta-order-tab:hover {
    border-color: var(--ta-green) !important;
    color: var(--ta-green) !important;
    background: var(--ta-white) !important;
}
#ta-account-root .ta-order-tab--active {
    background: var(--ta-green) !important;
    color: #ffffff !important;
    border-color: var(--ta-green) !important;
}
#ta-account-root .ta-orders-list {
    display: flex !important;
    flex-direction: column !important;
}
#ta-account-root .ta-order-row {
    border: none !important;
    border-bottom: 1px solid var(--ta-border) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
#ta-account-root .ta-order-row:last-child { border-bottom: none !important; }
#ta-account-root .ta-order-row__main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 18px 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
}
#ta-account-root .ta-order-icon {
    width: 40px !important;
    height: 40px !important;
    background: var(--ta-green-light) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
#ta-account-root .ta-order-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--ta-green) !important;
    fill: none !important;
    display: block !important;
}
#ta-account-root .ta-order-meta { flex: 1 !important; min-width: 0 !important; }
#ta-account-root .ta-order-top {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 5px 0 !important;
    flex-wrap: wrap !important;
}
#ta-account-root .ta-order-id {
    font-weight: 700 !important;
    font-size: .9rem !important;
    color: var(--ta-text) !important;
    margin: 0 !important;
    line-height: 1 !important;
}
#ta-account-root .ta-order-sub {
    font-size: .8rem !important;
    color: var(--ta-text-muted) !important;
    margin: 0 !important;
    line-height: 1 !important;
}
#ta-account-root .ta-order-total {
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--ta-text) !important;
    margin-left: auto !important;
    white-space: nowrap !important;
    padding-left: 20px !important;
    line-height: 1 !important;
}
#ta-account-root .ta-order-row__detail {
    padding: 0 0 18px 54px !important;
    display: none !important;
}
#ta-account-root .ta-order-row--expanded .ta-order-row__detail { display: block !important; }
#ta-account-root .ta-order-items {
    font-size: .84rem !important;
    color: var(--ta-text-muted) !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}
#ta-account-root .ta-order-items strong {
    color: var(--ta-text) !important;
    font-weight: 600 !important;
}

/* Badges */
#ta-account-root .ta-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px 3px 8px !important;
    border-radius: 20px !important;
    font-size: .74rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: none !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
#ta-account-root .ta-badge::before {
    content: '' !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}
#ta-account-root .ta-badge--delivered { background: var(--ta-green-light) !important; color: var(--ta-green) !important; }
#ta-account-root .ta-badge--delivered::before { background: var(--ta-green) !important; }
#ta-account-root .ta-badge--shipped { background: var(--ta-blue-light) !important; color: var(--ta-blue) !important; }
#ta-account-root .ta-badge--shipped::before { background: var(--ta-blue) !important; }
#ta-account-root .ta-badge--processing { background: var(--ta-yellow-light) !important; color: var(--ta-yellow) !important; }
#ta-account-root .ta-badge--processing::before { background: var(--ta-yellow) !important; }
#ta-account-root .ta-badge--cancelled { background: var(--ta-red-light) !important; color: var(--ta-red) !important; }
#ta-account-root .ta-badge--cancelled::before { background: var(--ta-red) !important; }

/* ═══════════════════════════════════════════════════
   11. NOTICES
═══════════════════════════════════════════════════ */
#ta-account-root .ta-notice {
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: .875rem !important;
    margin: 0 0 20px 0 !important;
    display: none !important;
    line-height: 1.4 !important;
    border: 1px solid transparent !important;
}
#ta-account-root .ta-notice.visible { display: block !important; }
#ta-account-root .ta-notice--success { background: var(--ta-green-light) !important; color: var(--ta-green) !important; border-color: var(--ta-green-badge) !important; }
#ta-account-root .ta-notice--error { background: var(--ta-red-light) !important; color: var(--ta-red) !important; border-color: var(--ta-red-border) !important; }

/* ═══════════════════════════════════════════════════
   12. ADDRESS MODAL
═══════════════════════════════════════════════════ */
.ta-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.52) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s !important;
    padding: 20px !important;
}
.ta-modal-overlay.ta-modal--open { opacity: 1 !important; pointer-events: all !important; }
.ta-modal-overlay .ta-modal {
    background: var(--ta-white) !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 560px !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    box-shadow: var(--ta-shadow-modal) !important;
    transform: translateY(20px) !important;
    transition: transform .2s !important;
    margin: auto !important;
}
.ta-modal-overlay.ta-modal--open .ta-modal { transform: translateY(0) !important; }
.ta-modal-overlay .ta-modal__header {
    background: var(--ta-green) !important;
    padding: 18px 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 10px 10px 0 0 !important;
    margin: 0 !important;
}
.ta-modal-overlay .ta-modal__header-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}
.ta-modal-overlay .ta-modal__header-icon {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,.15) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.ta-modal-overlay .ta-modal__header-icon svg { width: 18px !important; height: 18px !important; stroke: #fff !important; fill: none !important; display: block !important; }
.ta-modal-overlay .ta-modal__title { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
.ta-modal-overlay .ta-modal__subtitle { font-size: .8rem !important; color: rgba(255,255,255,.75) !important; margin: 3px 0 0 !important; padding: 0 !important; line-height: 1 !important; display: block !important; }
.ta-modal-overlay .ta-modal__close {
    background: rgba(255,255,255,.15) !important;
    border: none !important;
    border-radius: 6px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    transition: background .12s !important;
}
.ta-modal-overlay .ta-modal__close:hover { background: rgba(255,255,255,.28) !important; }
.ta-modal-overlay .ta-modal__close svg { width: 15px !important; height: 15px !important; stroke: #fff !important; fill: none !important; display: block !important; }
.ta-modal-overlay .ta-modal__body {
    padding: 24px 26px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.ta-modal-overlay .ta-modal-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;  /* keep labels+inputs top-aligned across columns */
}
/* Every field-group in the modal must be full-width within its grid cell */
.ta-modal-overlay .ta-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
}
/* Full-span field groups (phone, address lines) */
.ta-modal-overlay .ta-field-group--full {
    grid-column: 1 / -1 !important;
}
/* All inputs inside modal must fill their cell */
.ta-modal-overlay .ta-field-group .ta-input,
.ta-modal-overlay .ta-field-group .ta-select-wrap,
.ta-modal-overlay .ta-field-group .ta-select-wrap select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}
/* select-wrap must be block so it fills the cell */
.ta-modal-overlay .ta-select-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}
@media (max-width: 520px) {
    .ta-modal-overlay .ta-modal-grid-2 { grid-template-columns: 1fr !important; }
}
.ta-modal-overlay .ta-modal__footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 26px 26px !important;
    margin: 12px 0 0 0 !important;
    border-top: 1px solid var(--ta-border) !important;
    background: var(--ta-white) !important;
}
.ta-modal-overlay .ta-notice {
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: .875rem !important;
    display: none !important;
    border: 1px solid transparent !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.ta-modal-overlay .ta-notice.visible { display: block !important; }
.ta-modal-overlay .ta-notice--error { background: var(--ta-red-light) !important; color: var(--ta-red) !important; border-color: var(--ta-red-border) !important; }

/* ═══════════════════════════════════════════════════
   13. SPINNER
═══════════════════════════════════════════════════ */
@keyframes ta-spin { to { transform: rotate(360deg); } }
.ta-spinner {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: ta-spin .55s linear infinite !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════
   14. RESPONSIVE
═══════════════════════════════════════════════════ */
@media (max-width: 640px) {
    #ta-account-root .ta-section { padding: 20px 16px !important; }
    #ta-account-root .ta-order-row__detail { padding-left: 4px !important; }
    #ta-account-root .ta-order-total { font-size: .875rem !important; }
    #ta-account-root .ta-section__head { flex-wrap: wrap !important; }
    #ta-account-root .ta-main { padding: 24px 0 48px !important; }
}



/* ================================================================
   ACCOUNT GUEST GATE
   Colours pulled directly from B2B Login plugin variables:
     --b2b-green        #1f5c35
     --b2b-green-hover  #174d2b
     --b2b-green-light  #edf7f1
     --b2b-green-border #c3e6d0
     --b2b-border       #e5e7eb
     --b2b-r-input      6px
   ================================================================ */

#ta-gate-wrap {
    display:         flex !important;
    align-items:     flex-start !important;
    justify-content: center !important;
    padding:         56px 20px 72px !important;
    min-height:      50vh !important;
}

/* ── Card ───────────────────────────────────────────────── */
.ta-gate {
    background:     #ffffff !important;
    border:         1px solid #e5e7eb !important;
    border-radius:  10px !important;
    box-shadow:     0 4px 24px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04) !important;
    max-width:      440px !important;
    width:          100% !important;
    padding:        40px 36px 36px !important;
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;
    text-align:     center !important;
}

/* ── Icon ───────────────────────────────────────────────── */
.ta-gate__icon {
    width:           56px !important;
    height:          56px !important;
    background:      #edf7f1 !important;
    border:          1px solid #c3e6d0 !important;
    border-radius:   50% !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    margin-bottom:   20px !important;
    flex-shrink:     0 !important;
}
.ta-gate__icon svg {
    width:  24px !important;
    height: 24px !important;
    stroke: #1f5c35 !important;
}

/* ── Text ───────────────────────────────────────────────── */
.ta-gate__title {
    font-size:      1.35rem !important;
    font-weight:    700 !important;
    color:          #111827 !important;
    margin:         0 0 8px !important;
    padding:        0 !important;
    line-height:    1.25 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    background:     none !important;
    border:         none !important;
}
.ta-gate__sub {
    font-size:   0.875rem !important;
    color:       #6b7280 !important;
    line-height: 1.55 !important;
    margin:      0 0 26px !important;
}

/* ── Primary log-in button — matches .b2b-btn--primary ─── */
.ta-gate__btn--primary {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    width:           100% !important;
    padding:         14px 24px !important;
    background:      #1f5c35 !important;
    color:           #ffffff !important;
    border:          none !important;
    border-radius:   6px !important;
    font-size:       0.975rem !important;
    font-weight:     600 !important;
    cursor:          pointer !important;
    text-decoration: none !important;
    transition:      background 0.18s ease, box-shadow 0.18s ease !important;
    letter-spacing:  0.01em !important;
    line-height:     1.4 !important;
    box-sizing:      border-box !important;
    -webkit-appearance: none !important;
    appearance:      none !important;
    margin-bottom:   0 !important;
}
.ta-gate__btn--primary:hover {
    background:  #174d2b !important;
    box-shadow:  0 4px 14px rgba(31,92,53,.3) !important;
    color:       #ffffff !important;
}

/* ── OR divider — matches .b2b-divider ─────────────────── */
.ta-gate__divider {
    display:     flex !important;
    align-items: center !important;
    gap:         14px !important;
    width:       100% !important;
    margin:      22px 0 18px !important;
    color:       #9ca3af !important;
    font-size:   0.8rem !important;
    letter-spacing: 0.04em !important;
}
.ta-gate__divider::before,
.ta-gate__divider::after {
    content:    '' !important;
    flex:       1 !important;
    height:     1px !important;
    background: #e5e7eb !important;
}

/* ── Account-type rows — matches .b2b-type-card style ─── */
.ta-gate__types {
    display:        flex !important;
    flex-direction: column !important;
    gap:            10px !important;
    width:          100% !important;
}

.ta-gate__type {
    display:      flex !important;
    align-items:  center !important;
    gap:          13px !important;
    padding:      14px 16px !important;
    border:       1.5px solid #e5e7eb !important;
    border-radius: 6px !important;
    background:   #ffffff !important;
    cursor:       pointer !important;
    text-align:   left !important;
    text-decoration: none !important;
    transition:   border-color 0.18s ease, background 0.18s ease !important;
    width:        100% !important;
    box-sizing:   border-box !important;
    -webkit-appearance: none !important;
    appearance:   none !important;
    font-family:  inherit !important;
    color:        #111827 !important;
    line-height:  1.4 !important;
}
.ta-gate__type:hover {
    border-color: #c3e6d0 !important;
    background:   #edf7f1 !important;
}

/* Wholesale row — pre-highlighted like an active b2b-type-card */
.ta-gate__type--ws {
    border-color: #1f5c35 !important;
    background:   #edf7f1 !important;
}
.ta-gate__type--ws:hover {
    background: #d9f0e3 !important;
}

/* Icon box inside row */
.ta-gate__type-icon {
    width:           38px !important;
    height:          38px !important;
    border-radius:   6px !important;
    background:      #f3f4f6 !important;
    border:          1px solid #e5e7eb !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    flex-shrink:     0 !important;
}
.ta-gate__type-icon svg { width: 17px; height: 17px; stroke: #6b7280; }

.ta-gate__type-icon--ws {
    background: #edf7f1 !important;
    border-color: #c3e6d0 !important;
}
.ta-gate__type-icon--ws svg { stroke: #1f5c35; }

/* Text block */
.ta-gate__type-info {
    flex:           1 !important;
    display:        flex !important;
    flex-direction: column !important;
    gap:            2px !important;
    min-width:      0 !important;
}
.ta-gate__type-info strong {
    font-size:   0.875rem !important;
    font-weight: 600 !important;
    color:       #111827 !important;
    display:     block !important;
}
.ta-gate__type-info span {
    font-size:   0.775rem !important;
    color:       #6b7280 !important;
    font-weight: 400 !important;
    display:     block !important;
}

/* Arrow chevron */
.ta-gate__type-arrow {
    width:       16px !important;
    height:      16px !important;
    stroke:      #9ca3af !important;
    flex-shrink: 0 !important;
}
.ta-gate__type--ws .ta-gate__type-arrow { stroke: #1f5c35; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    #ta-gate-wrap { padding: 32px 16px 48px; }
    .ta-gate       { padding: 28px 20px 24px; border-radius: 10px; }
}

/* ── Wholesale upgrade prompt in sidebar ─────────────────── */
.ta-sidebar__upgrade {
    margin:        12px 0 4px !important;
    padding:       14px 16px !important;
    background:    var(--ta-green-light) !important;
    border:        1px solid var(--ta-green-badge) !important;
    border-radius: var(--ta-radius) !important;
    text-align:    center !important;
}
.ta-upgrade-label {
    margin:      0 0 8px !important;
    font-size:   0.78rem !important;
    color:       var(--ta-text) !important;
    font-weight: 500 !important;
}
.ta-btn--upgrade {
    width:        100% !important;
    font-size:    0.82rem !important;
    padding:      8px 12px !important;
    border-color: var(--ta-green) !important;
    color:        var(--ta-green) !important;
}
.ta-btn--upgrade:hover {
    background: var(--ta-green) !important;
    color:      var(--ta-white) !important;
}