@layer base.modules {
  /* ── 체크 항목 — 문장 앞에 체크 표시(✓)를 붙이되 줄바꿈 시 둘째 줄부터도 첫 글자
     위치에 맞춘다(행잉 들여쓰기). text-indent 음수 방식은 overflow-x:auto인 조상
     (예: .sh-letter-modal의 overflow-y:auto — 스펙상 한 축만 visible이 아니면 다른
     축도 auto로 취급된다)을 만나면 체크 표시가 스크롤 경계에 잘려 보이는 문제가 있어
     (2026-08-14), 대신 flex로 체크 표시를 별도 칸으로 분리한다. ::before가 생성하는
     박스와 본문 텍스트(익명 flex 아이템)가 각자 자기 칸 안에서만 줄바꿈되므로 클리핑
     위험이 없다. */
  .check-item {
    display: flex;
    align-items: baseline;
    gap: 0.4em;
  }
  .check-item::before {
    content: "✓";
    flex-shrink: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
  }

  /* ── 버튼 ── */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* `<a class="btn">`이 UA 기본 밑줄을 그대로 받고 있었다 — 버튼은 링크처럼
       보이지 않아야 하고, M3도 밑줄을 링크의 표시로만 쓴다. */
    text-decoration: none;
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
  }

  .btn:disabled {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  .btn:disabled:hover {
    background: var(--color-bg-subtle);
    box-shadow: none;
  }

  /* 컴포넌트 슬롯(--btn-*) — site가 선택자를 재선언하지 않고 값만 대입한다
     (DR-030, rule/css-guide.md 3절). 기본값이 곧 계약이다. */
  .btn-primary {
    background: var(--btn-primary-bg, var(--color-primary));
    color: var(--btn-primary-fg, var(--color-text-on-primary));
  }

  .btn-primary:hover {
    background: var(--btn-primary-bg-hover, var(--color-primary-hover));
    box-shadow: var(--shadow-glow);
  }

  .btn-dark {
    background: var(--btn-dark-bg, var(--color-accent));
    color: var(--btn-dark-fg, var(--color-text-inverse));
  }

  .btn-dark:hover {
    background: var(--btn-dark-bg-hover, var(--color-accent-light));
  }

  .btn-lg {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-lg);
  }

  .btn-sm {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
  }

  /* ── 구분선 유틸리티 — 항목 사이를 가르는 진짜 구분선 전용(탭/토글 활성 밑줄이나
     컴포넌트 자체 경계와는 별개, EN-071) ── */

  .hairline-top { border-top: var(--border-width) solid var(--color-border); }
  .hairline-bottom { border-bottom: var(--border-width) solid var(--color-border); }
  .hairline-top--dashed { border-top: var(--border-width) dashed var(--color-border); }
  .hairline-bottom--dashed { border-bottom: var(--border-width) dashed var(--color-border); }

  /* ── 모달 (오버레이 + 중앙 패널) ── */

  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    z-index: 100;
  }

  .modal-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 420px;
  }

  /* .modal-panel의 gap은 직속 자식(h3·p·form) 사이에만 닿는다 — form 안 입력창들은
     form의 자식이라 그 gap을 못 받는다(2026-08-15, 메일 문의 입력창 간격 0 발견).
     문의 폼(메일·채팅) 전용 — 상품 신청 모달은 __body에 자체 gap이 있어 해당 없음. */
  .sh-inquiry-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  /* 편지·Details 등 vanilla JS로 is-open 클래스를 직접 토글하는 소비처가 붙이는
     opt-in 수식자(site sections.css에서 이관, EN-071) — .modal-overlay 전체에 걸면
     hidden 속성 토글 방식(#prOverlay 등)과 겹쳐 회귀가 난다(2026-08-14 발견), 그래서
     --js로 좁혔다. m3-duration/m3-easing 토큰이 없는 사이트에서는 표시 전환(display:none)만
     남고 애니메이션은 조용히 생략된다. */
  .modal-overlay--js:not(.is-open) { display: none; }
  .modal-overlay--js.is-open { animation: sh-fadein var(--m3-duration-medium1) var(--m3-easing-standard); }
  .modal-overlay--js.is-open .modal-panel { animation: sh-unfold var(--m3-duration-medium2) var(--m3-easing-emphasized-decelerate); }
  @keyframes sh-fadein { from { opacity: 0; } to { opacity: 1; } }
  @keyframes sh-unfold { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .modal-overlay--js.is-open, .modal-overlay--js.is-open .modal-panel { animation: none; } }

  /* ── 상태 태그 (수동 라벨 — 버튼처럼 보이지 않는 옅은 칩) ── */

  .tag {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
  }

  /* ── 입력 필드 ── */

  .input {
    font-family: var(--font-family);
    font-size: var(--font-size-control);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
    box-sizing: border-box;
  }

  .input:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
  }

  .input-error {
    border-color: var(--color-error);
  }

  /* ── 텍스트영역 ── */

  .textarea {
    font-family: var(--font-family);
    font-size: var(--font-size-control);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    outline: none;
    resize: vertical;
    min-height: 120px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
  }

  /* ── 카드 ──
     컴포넌트 슬롯(--card-*) — base 값은 그대로 두고 site 레이어가 값만 대입한다
     (DR-030, rule/css-guide.md 3절). 슬롯 기본값은 이 선언 자체가 계약이다 —
     site가 슬롯을 채우지 않으면 지금 값과 동일하게 렌더된다. */

  .card {
    background: var(--card-bg, var(--color-bg));
    border: var(--card-border-width, 1px) solid var(--card-border-color, var(--color-border));
    border-radius: var(--card-radius, var(--radius-lg));
    padding: var(--card-padding, var(--spacing-lg));
    box-shadow: var(--card-shadow, var(--shadow-sm));
    transition: box-shadow var(--transition-normal);
  }

  .card:hover {
    box-shadow: var(--card-shadow-hover, var(--shadow-md));
  }

  .card--compact {
    width: 100%;
    max-width: var(--width-compact);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .card-dark {
    background: var(--color-accent);
    color: var(--color-text-inverse);
    border: none;
  }

  .card-highlight {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
  }

  /* ── 배지 ── */

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
  }

  /* ── 알림 메시지 ── */

  .alert {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
  }

  .alert-success {
    background: #f0fdf4;
    color: var(--color-success);
    border: 1px solid #bbf7d0;
  }

  .alert-error {
    background: #fef2f2;
    color: var(--color-error);
    border: 1px solid #fecaca;
  }

  /* ── 스크린리더 전용 ── */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ── Alpine 초기 렌더 숨김 ── */

  [x-cloak] {
    display: none !important;
  }

  /* ── 수량 스텝퍼 ──
     컴포넌트 슬롯(--qty-*) — 표면(채움 vs 테두리)만 site가 값으로 갈아 끼운다(설계 논의
     08-09). 구조(감싸는 flex + 버튼 둘 + 입력칸)는 base가 고정, site는 선택자를 재선언하지
     않고 modifier 클래스(예: sh-qty)로 값만 얹는다. */

  .cart-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    background: var(--qty-bg, transparent);
    border: var(--qty-border-width, var(--border-width-control)) solid var(--qty-border-color, var(--color-border));
    border-radius: var(--radius-full);
    overflow: hidden;
  }

  .cart-qty-stepper button {
    width: 28px; /* 버튼 폭 — 간격 개념 아님, 리터럴 유지 */
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--qty-fg, inherit);
  }

  .cart-qty-stepper input[type="number"] {
    width: 40px; /* 입력칸 폭 — 간격 개념 아님, 리터럴 유지 */
    border: none;
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
  }

  .cart-qty-stepper input[type="number"]::-webkit-inner-spin-button,
  .cart-qty-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ── 이행 타임라인 (구매자 화면 전용 — dashboard.css를 읽지 않으므로 고객 토큰으로 정의) ── */

  .fulfil-steps {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .fulfil-step {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xs);
  }

  .fulfil-step + .fulfil-step {
    border-top: 1px dashed var(--color-border);
  }

  .fulfil-step .mark {
    width: 24px; /* 아이콘 박스 폭 — 간격 개념 아님, 리터럴 유지 */
    text-align: center;
  }

  .fulfil-step .name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
  }

  .fulfil-step.todo .name {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-normal);
  }

  .fulfil-step.current .name {
    color: var(--color-primary-text);
  }

  .fulfil-step .sub {
    flex-basis: 100%;
    padding-left: var(--spacing-xl);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
  }

  /* ── 로케일 스위처 ── details/summary 기반 JS-free 드롭다운.
     두 파샬이 같은 마크업·클래스를 쓴다 — _locale_switcher.html(사이트 헤더·파트너 인증)과
     _partner_locale_switcher.html(파트너 대시보드). 링크 주소만 다르다.
     모양은 하나로 통일했다 — 알약 모양 투명 버튼. 파트너 대시보드에만 테두리 상자형이
     따로 있었으나 같은 부품이 두 모양을 갖는 이유가 없어 기본형으로 합쳤다(EN-042 E-3).
     santa-here-global components.css가 `.sh-header .locale-switcher summary`로 헤더용을
     다시 덮으므로 이 이름을 바꾸면 그 오버라이드가 끊긴다. */
  .locale-switcher {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    font-family: inherit;
  }

  .locale-switcher summary {
    list-style: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-md); /* 6px→--spacing-sm(8/8), 12px→--spacing-md(16/12) */
    color: var(--color-text, #222);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm); /* 6px → --spacing-sm (base 8px / site 8px) */
    font-weight: 600;
    transition: background 0.15s;
  }

  .locale-switcher summary:hover,
  .locale-switcher[open] summary {
    background: var(--color-bg-subtle, #f5f5f5);
  }

  .locale-switcher summary::-webkit-details-marker {
    display: none;
  }

  .locale-switcher-globe {
    flex: none;
    opacity: 0.8;
  }

  .locale-switcher-caret {
    width: 0;
    height: 0;
    /* 삼각형 화살표 — 두께가 곧 도형 크기라 테두리 두께 스케일 대상 아님 */
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
    transition: transform 0.15s;
  }

  .locale-switcher[open] .locale-switcher-caret {
    transform: rotate(180deg);
  }

  .locale-switcher-menu {
    position: absolute;
    right: 0;
    top: calc(100% + var(--spacing-sm)); /* 6px → --spacing-sm (base 8px / site 8px) */
    min-width: 120px; /* 드롭다운 폭 — 간격 개념 아님, 리터럴 유지 */
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-md); /* 12px → --radius-md (base 8px / site 12px) */
    background: var(--color-bg, #fff);
    box-shadow: 0 8px 24px rgba(58, 42, 34, 0.12); /* 브랜드 잉크 그림자 — elevation 단계와 색이 달라 리터럴 유지 */
    overflow: hidden;
    z-index: 20;
  }

  .locale-switcher-menu a,
  .locale-switcher-menu button {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md); /* 9px→--spacing-sm(8/8), 14px→--spacing-md(16/12) */
    color: var(--color-text, #222);
    text-decoration: none;
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    font-weight: 600;
    /* button 전용 리셋 — a는 기본이 이미 이렇다 */
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
  }

  .locale-switcher-menu a:hover,
  .locale-switcher-menu button:hover {
    background: var(--color-bg-subtle, #f5f5f5);
  }
  /* ── 옵션 선택기 ── 공용 파샬 _variant_picker.html의 구조만 갖는다. 레이아웃(줄바꿈·간격)과
     히든 라디오 처리(position·opacity·pointer-events), 레이블의 기본 거동(cursor·정렬)만
     여기서 정의한다. 테두리·반경·색·글꼴·여백 등 표면은 쓰는 사이트가 소유한다(현재
     santa-here-global components.css "7. 옵션 선택기"가 유일한 소비자). 구조 클래스명은
     이 파샬이 발행하므로 사이트가 바꾸지 않는다. */
  .variant-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-md);
  }

  .variant-picker__item { position: relative; }

  .variant-picker__item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .variant-picker__item label {
    display: block;
    cursor: pointer;
    text-align: center;
  }

  .variant-picker__item label .variant-picker__label { display: block; }
  .variant-picker__item label .variant-picker__price { display: block; }

  /* ── 파트너 대시보드 상단 바 (partner_layout.html) ── 스크린샷 대상 밖(로그인 필요 화면) — 미검증 */

  .partner-topbar {
    display: flex;
    justify-content: flex-end;
    padding: var(--spacing-md) var(--spacing-lg) 0; /* 12px→--spacing-md(16/12), 24px→--spacing-lg(24/16) */
  }

  /* 세로 단계 목록 — partials/_step_list.html의 step_list() 매크로가 찍는다(설계 논의 08-09).
     marker 변이(dot·number)로 표시 방식만 가른다. dot은 파트너 가입 안내가 유일한
     소비자라 여백(margin)까지 여기서 기본값으로 갖는다 — 두 번째 소비자가 생기면 슬롯으로
     연다. number(상품 상세 배송 여정)는 sections.css에서 브랜드 타이포로 재정의한다. */
  .step-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .step-list--dot {
    width: fit-content; /* 가장 긴 줄 폭까지만 — 그 폭 기준으로 컨테이너 안에서 가운데 배치 */
    max-width: 340px; /* 상한 — Details 아코디언이 열려도 이 이상 안 넓어짐(긴 문장은 안에서 줄바꿈) */
    margin-top: var(--spacing-lg); /* 자리 대체: 종전 h1 margin-top(sub) + terms-brief margin */
    margin-bottom: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
  }

  .step-list--dot .step-list__item {
    position: relative;
    padding: 0 0 var(--spacing-lg) var(--spacing-lg);
  }

  .step-list--dot .step-list__item:last-child {
    padding-bottom: 0;
  }

  .step-list--dot .step-list__item::before {
    /* 단계 점 */
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--color-primary);
  }

  .step-list--dot .step-list__item:not(:last-child)::after {
    /* 세로선 — 마지막 항목엔 없어 아래로 삐져나오지 않음 */
    content: "";
    position: absolute;
    left: 0.19em;
    top: 1em;
    bottom: 0;
    width: 1px;
    background: var(--color-border);
  }

  /* number — 번호 원(.step-list__circle) + 연결선(.step-list__line)을 마크업으로 그린다 */
  .step-list--number .step-list__item { display: flex; gap: var(--spacing-md); }
  .step-list__node { display: flex; flex-direction: column; align-items: center; }
  .step-list__circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    flex: none;
  }
  .step-list__line {
    width: 2px;
    flex: 1;
    background: var(--color-border);
    min-height: var(--spacing-2xl);
  }
  .step-list--number .step-list__body { padding-bottom: var(--spacing-xl); }
  .step-list--number .step-list__label { font-weight: var(--font-weight-normal); color: var(--color-text); }

  .step-list__label {
    display: block;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-text);
  }

  .step-list__desc {
    display: block;
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs); /* 4px → --spacing-xs */
  }
}

@layer base.layout {
  .l-compact {
    width: 100%;
    max-width: var(--width-compact);
    margin-left: auto;
    margin-right: auto;
  }
}

@layer base.modules {
  /* ── 내 공간 레이아웃 — 왼쪽 갈래 목록 + 오른쪽 본문 (US-074).
     seller·partner 대시보드와 배치는 같되 계통은 다르다: 저쪽은 dashboard-tokens.css로
     토큰부터 갈린 운영자 화면이고, 내 공간은 구매자가 브랜드 화면에서 이어 들어오는
     자리라 base 토큰을 그대로 쓴다. 좁은 화면에서는 갈래 목록이 본문 위로 접힌다. */
  .account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg, 2rem);
    align-items: start;
    width: 100%; /* body가 display:flex(세로)라 flex 자식은 이게 없으면 콘텐츠 폭만큼 shrink-wrap된다 — .l-checkout과 같은 근거(sections.css) */
    max-width: var(--width-wide);
    margin: 0 auto;
    padding: var(--spacing-lg, 2rem) var(--spacing-lg, 2rem);
    box-sizing: border-box;
  }

  .account-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.5rem);
  }

  .account-nav-item {
    padding: var(--spacing-sm, 0.75rem);
    border-radius: var(--radius-sm, 0.375rem);
    text-decoration: none;
    color: inherit;
  }

  .account-nav-item.is-active {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.05));
    font-weight: 600;
  }

  .account-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    min-width: 0;
    width: 100%;
    max-width: var(--width-content);
  }

  .account-content--compact { max-width: var(--width-compact); }
  .account-content--order { max-width: var(--width-form); }

  @media (min-width: 40.001rem) {
    .account-layout { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
    .account-nav { flex-direction: column; flex-wrap: nowrap; }
  }
}

@layer base.modules {
  .account-order-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
    width: 100%;
  }

  .account-order-list > .card { width: 100%; }
}

@layer base.modules {
  /* ── 계정 메뉴 ── details/summary 기반 JS-free 드롭다운.
     locale-switcher와 같은 부품 규격(패딩·간격·화살표·드롭다운 모양)을 그대로 맞춘다. */
  .account-menu {
    position: relative;
    display: inline-block;
    font-size: var(--font-size-sm);
    font-family: inherit;
  }

  .account-menu summary,
  .account-menu-login {
    list-style: none;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text, #222);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
  }

  .account-menu summary:hover,
  .account-menu[open] summary,
  .account-menu-login:hover {
    background: var(--color-bg-subtle, #f5f5f5);
  }

  .account-menu summary::-webkit-details-marker {
    display: none;
  }

  .account-menu-user {
    flex: none;
    opacity: 0.8;
  }

  .account-menu-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
    transition: transform 0.15s;
  }

  .account-menu[open] .account-menu-caret {
    transform: rotate(180deg);
  }

  .account-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + var(--spacing-sm));
    min-width: 120px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: var(--radius-md);
    background: var(--color-bg, #fff);
    box-shadow: 0 8px 24px rgba(58, 42, 34, 0.12);
    overflow: hidden;
    z-index: 20;
  }

  .account-menu-dropdown a {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text, #222);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
  }

  .account-menu-dropdown a:hover {
    background: var(--color-bg-subtle, #f5f5f5);
  }
}