.elementor-89 .elementor-element.elementor-element-f213d51{--display:flex;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-89 .elementor-element.elementor-element-2ff9a21{--display:flex;}.elementor-89 .elementor-element.elementor-element-b33f6bc{--spacer-size:80px;}/* Start custom CSS for wc-elements, class: .elementor-element-54ede35 *//* * WooCommerce 'My Account' 위젯 스타일
 * (abostecbio.com 테마 적용)
 *
 * .account 클래스를 가진 위젯 래퍼를 기준으로 합니다.
 */

/* --- 색상 변수 (abostecbio.com 기준) --- */
:root {
    --abostec-blue: #003366;  /* 메인 네이비 블루 */
    --abostec-green: #A8D75A; /* 포인트 라임 그린 */
    --abostec-text: #333333;  /* 기본 텍스트 */
    --abostec-border: #f0f0f0; /* 연한 테두리 */
}

/* --- 1. 위젯 전체 컨테이너 --- */
/* .account 클래스가 있는 컨테이너 (위젯 전체) */
.account {
    background-color: #ffffff;
    border: 1px solid var(--abostec-border);
    border-radius: 5px;
    padding: 25px;
    /* 사이트의 다른 요소들과 어울리는 은은한 그림자 */
    box-shadow: 0 4px 15px rgba(0, 51, 102, 0.05); 
}

/* --- 2. 위젯 제목 (예: "My Account") --- */
.account .widget-title {
    color: var(--abostec-blue);
    font-family: 'Montserrat', sans-serif;
    font-size: 22px; /* 사이트 헤딩과 유사하게 */
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    /* 포인트 색상으로 하단 라인 */
    border-bottom: 2px solid var(--abostec-green);
}

/* --- 3. 환영 메시지 (예: "안녕하세요, [이름]님") --- */
/* 위젯 내부의 첫 번째 문단(p)을 대상으로 함 */
.account p:first-of-type {
    font-size: 16px;
    color: var(--abostec-text);
    margin-bottom: 25px;
    line-height: 1.6;
    border-bottom: 1px solid var(--abostec-border);
    padding-bottom: 20px;
}
.account p:first-of-type a {
    color: var(--abostec-blue);
    font-weight: 600;
    text-decoration: none;
}
.account p:first-of-type a:hover {
    color: var(--abostec-green);
}

/* --- 4. 네비게이션 메뉴 (핵심) --- */
/* (Dashboard, Orders, Downloads, Logout 등) */
.account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account .woocommerce-MyAccount-navigation li {
    margin: 0;
    /* 각 메뉴를 라인으로 구분 */
    border-bottom: 1px solid var(--abostec-border);
}
/* 마지막 메뉴의 하단 라인 제거 */
.account .woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}

.account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 13px 10px;
    color: var(--abostec-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 28px; /* 아이콘을 위한 공간 확보 */
}

/* --- 5. 메뉴 앞 아이콘 (›) --- */
.account .woocommerce-MyAccount-navigation li a::before {
    content: '›';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 700;
    color: var(--abostec-green); /* 포인트 그린 색상 */
    transition: all 0.3s ease;
}

/* --- 6. 호버 (마우스 올렸을 때) --- */
.account .woocommerce-MyAccount-navigation li a:hover {
    background-color: #f9f9f9; /* 살짝 회색 배경 */
    color: var(--abostec-blue); /* 텍스트를 네이비로 */
}
.account .woocommerce-MyAccount-navigation li a:hover::before {
    color: var(--abostec-blue); /* 아이콘도 네이비로 */
    left: 12px; /* 살짝 오른쪽으로 움직이는 효과 */
}

/* --- 7. 활성 메뉴 (현재 페이지) --- */
.account .woocommerce-MyAccount-navigation li.is-active > a {
    background-color: var(--abostec-blue); /* 배경 네이비 */
    color: #ffffff; /* 텍스트 흰색 */
}
.account .woocommerce-MyAccount-navigation li.is-active > a::before {
    color: var(--abostec-green); /* 네이비 배경 + 그린 아이콘 */
    left: 12px;
}/* End custom CSS */