@font-face {
  font-family: "Noto Sans KR";
  src: url("../fonts/noto-sans-kr.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Figma account overview */
.mobile-member-nav {
  display: none;
}

.account-mobile-back {
  width: 44px;
  height: 44px;
  color: var(--ink);
}

.account-mobile-back span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.account-mobile-back img {
  width: 28px;
  height: 28px;
}

.account-overview-shell {
  width: min(calc(100% - 128px), 1312px);
  min-height: 1012px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 66px;
  padding-top: 62px;
  padding-bottom: 140px;
}

.account-side-nav {
  display: flex;
  flex-direction: column;
  align-self: start;
  padding-top: 4px;
}

.account-side-nav a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.account-side-nav a.is-active {
  color: var(--paper);
  background: var(--ink);
  font-weight: 500;
}

.account-nav-home {
  display: inline-flex;
  align-self: flex-start;
  min-height: 0;
  margin-bottom: 28px;
  padding: 0 0 6px;
  border: 0;
  box-shadow: inset 0 -10px 0 -2px #d9e4ff;
  color: var(--ink);
  font-size: 24px;
  font-weight: 700;
}

.account-nav-home.is-active {
  color: var(--ink);
  background: none;
}

.account-nav-group {
  margin-bottom: 30px;
  padding-top: 22px;
  border-top: 1px solid #ececE7;
}

.account-nav-group:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.account-nav-group-title {
  margin: 0 0 8px;
  padding: 0 12px;
  color: #111;
  font-size: 16px;
  font-weight: 700;
}

.account-nav-group a {
  justify-content: flex-start;
  min-height: 36px;
  color: #555;
  font-size: 13px;
}

.account-nav-group a.is-active {
  color: var(--paper);
  font-weight: 500;
}

.account-nav-logout {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid #ecece7;
}

.account-nav-logout button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 0;
  color: #555;
  background: transparent;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.account-nav-logout button:hover {
  color: var(--ink);
  background: var(--mist);
}

.account-overview-content {
  min-width: 0;
}

.account-overview-content > .account-saved {
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid #c8d9ce;
  background: #f6faf7;
}

.account-overview-heading {
  min-height: 74px;
  margin-bottom: 32px;
}

.account-overview-heading h1 {
  margin: 0;
  color: #111;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
}

.account-overview-heading p {
  margin: 10px 0 0;
  color: #777;
  font-size: 13px;
}

.account-heading-with-meta,
.account-heading-with-action {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.account-heading-with-meta > span {
  padding-top: 10px;
  color: #777;
  font-size: 12px;
}

.account-overview-recent {
  margin-bottom: 44px;
}

.account-overview-recent:last-child {
  margin-bottom: 0;
}

.account-overview-recent h2 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 500;
}

.account-outline-button {
  width: 220px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 18px;
  border: 1px solid #111;
  border-radius: 2px;
  color: #111;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
}

.account-heading-with-action .account-outline-button {
  margin-top: 0;
}

.account-panel-empty {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  border: 1px solid #ddd;
  text-align: center;
}

.account-panel-empty[hidden] {
  display: none;
}

.account-panel-empty strong {
  font-size: 15px;
  font-weight: 500;
}

.account-panel-empty span,
.account-panel-empty a {
  color: #777;
  font-size: 12px;
}

.account-panel-empty a {
  color: #111;
  border-bottom: 1px solid #111;
}

.account-order-list-figma {
  display: grid;
  gap: 18px;
  border: 0;
}

.account-address-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  border: 0;
}

.account-address-grid .account-address-row {
  min-height: 170px;
  align-items: flex-start;
  flex-direction: column;
  padding: 22px;
  border: 1px solid #ddd;
}

.account-profile-details {
  width: min(500px, 100%);
  margin: 0;
}

.account-profile-details > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
}

.account-profile-details dt,
.account-profile-details dd {
  margin: 0;
  font-size: 12px;
}

.account-profile-details dt {
  color: #777;
}

.account-profile-error {
  margin-bottom: 20px;
  padding: 12px 16px;
  color: #9f2020;
  border: 1px solid #e2b8b8;
  background: #fffafa;
  font-size: 12px;
}

.account-settings-stack {
  display: grid;
  gap: 56px;
}

.account-settings-section {
  border-top: 1px solid #111;
}

.account-settings-heading {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #ddd;
}

.account-settings-heading h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.account-settings-heading > span {
  color: #777;
  font-size: 12px;
}

.account-settings-description {
  margin: 9px 0 0;
  color: #777;
  font-size: 12px;
  line-height: 1.7;
}

.account-reauth-gate {
  padding-top: 4px;
}

.account-reauth-gate h2 {
  margin: 0 0 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid #111;
  font-size: 15px;
  font-weight: 500;
}

.account-reauth-gate-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 64px 0 56px;
  text-align: center;
}

.account-reauth-gate-body > p {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}

.account-reauth-gate-divider {
  width: min(320px, 100%);
  margin: 0;
}

.account-profile-form.account-reauth-password-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(320px, 100%);
  padding-top: 0;
}

.account-reauth-password-form .account-profile-password {
  width: 100%;
}

.account-reauth-password-form .account-settings-submit,
.account-reauth-gate-body .account-social-actions {
  width: min(320px, 100%);
  margin: 0;
}

.account-settings-submit {
  width: 220px;
  min-width: 180px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid #111;
  border-radius: 2px;
  color: #fff;
  background: #111;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.account-profile-form {
  width: min(600px, 100%);
  display: grid;
  gap: 22px;
  padding-top: 28px;
}

.account-profile-form > label {
  display: grid;
  gap: 9px;
  color: #111;
  font-size: 12px;
}

.account-profile-form input,
.account-profile-form select,
.account-profile-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 0;
  color: #111;
  background: #fff;
  font: inherit;
}

.account-profile-form textarea {
  padding: 10px 12px;
  resize: vertical;
}

.account-profile-form input:disabled {
  color: #777;
  background: #f7f7f5;
}

.account-profile-form small {
  color: #777;
  font-size: 11px;
}

.account-profile-form small.is-error,
.account-form-error {
  color: #b42318;
}

.account-profile-password {
  position: relative;
  display: block;
}

.account-profile-password input {
  padding-right: 46px;
}

.account-profile-password button {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.account-profile-password img {
  width: 18px;
  height: 18px;
}

.account-profile-gender {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-profile-gender legend {
  margin-bottom: 9px;
  font-size: 12px;
}

.account-profile-gender > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-profile-gender label {
  position: relative;
}

.account-profile-gender input {
  position: absolute;
  opacity: 0;
}

.account-profile-gender label span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #ccc;
  font-size: 12px;
}

.account-profile-gender label + label span {
  border-left: 0;
}

.account-profile-gender input:checked + span {
  color: #fff;
  border-color: #111;
  background: #111;
}

.account-login-status {
  width: min(600px, 100%);
  margin: 0;
}

.account-login-status > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
}

.account-login-status dt,
.account-login-status dd {
  margin: 0;
  font-size: 12px;
}

.account-login-status dt {
  color: #777;
}

.account-social-status-list > div {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #ddd;
}

.account-social-status-list > div > span {
  display: grid;
  gap: 5px;
}

.account-social-status-list .account-social-provider {
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-social-provider > img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.account-social-provider > span {
  display: grid;
  gap: 5px;
}

.account-social-status-list strong {
  font-size: 13px;
  font-weight: 500;
}

.account-social-status-list small,
.account-social-status-list em {
  color: #777;
  font-size: 11px;
  font-style: normal;
}

.account-social-status-list a {
  min-width: 92px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111;
  font-size: 11px;
}

/* Member identity, engagement and benefit surfaces */
.account-auth-lead {
  max-width: 460px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.account-social-actions {
  display: grid;
  gap: 10px;
  margin: 30px 0;
}

.account-social-button {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #d8d8d4;
  color: #111;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

.account-social-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-social-button:hover:not(:disabled) {
  filter: brightness(.97);
}

.account-social-mark {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.account-social-button:disabled {
  cursor: not-allowed;
  color: #aaa;
  background: #f4f4f1;
}

.account-social-button:disabled .account-social-mark {
  filter: grayscale(1);
  opacity: .35;
}

.account-social-naver:not(:disabled) {
  color: #fff;
  border-color: #03a94d;
  background: #03a94d;
}

.account-social-naver .account-social-mark {
  width: 40px;
  height: 40px;
  margin-right: -8px;
}

.account-social-kakao:not(:disabled) {
  border-color: #fee500;
  background: #fee500;
}

.account-social-kakao .account-social-mark {
  width: 20px;
  height: 20px;
}

.account-social-google .account-social-mark {
  width: 18px;
  height: 18px;
}

.account-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  color: #999;
  font-size: 11px;
}

.account-auth-divider::before,
.account-auth-divider::after {
  height: 1px;
  flex: 1;
  background: #e5e5e1;
  content: '';
}

.account-join-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 30px 0;
  padding: 0;
  list-style: none;
}

.account-join-steps li {
  display: grid;
  gap: 7px;
  padding: 15px 8px;
  background: #f5f5f2;
  text-align: center;
}

.account-join-steps strong {
  font-size: 11px;
}

.account-join-steps span,
.account-identity-note,
.account-identity-summary {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.account-identity-note {
  margin-top: 12px;
  text-align: center;
}

.account-deferred-identity-note {
  margin: 28px 0;
  padding: 18px 20px;
  color: var(--muted);
  background: var(--mist);
  font-size: 11px;
  line-height: 1.7;
}

.account-identity-summary {
  margin: 28px 0;
  padding: 20px;
  background: #f5f5f2;
}

.account-identity-summary p + p {
  margin-top: 6px;
}

.account-verified-profile {
  display: grid;
  gap: 1px;
  margin: 28px 0;
  background: #e6e6e1;
}

.account-verified-profile > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  padding: 13px 16px;
  background: #f7f7f4;
}

.account-verified-profile dt {
  color: var(--muted);
}

.account-verified-profile dd {
  margin: 0;
}

.account-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-list-limit-note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.account-recent-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.account-recent-card {
  color: inherit;
  text-decoration: none;
}

.account-recent-media {
  aspect-ratio: 4 / 5;
  display: block;
  overflow: hidden;
  background: #f2f2ef;
}

.account-recent-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-recent-copy {
  display: grid;
  gap: 4px;
  padding-top: 9px;
  font-size: 12px;
}

.account-recent-copy strong {
  font-weight: 500;
}

.recent-history {
  padding-top: 72px;
  padding-bottom: 140px;
}

.recent-history-heading {
  margin-bottom: 40px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}

.recent-history-heading h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
}

.recent-history-heading p {
  color: var(--muted);
  font-size: 13px;
}

.account-inquiry-compose {
  margin-bottom: 32px;
  border: 1px solid #ddd;
}

.account-inquiry-compose summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}

.account-inquiry-compose[open] summary {
  border-bottom: 1px solid #ddd;
}

.account-inquiry-compose .account-profile-form {
  width: 100%;
  padding: 24px 18px 28px;
}

.account-inquiry-list details {
  border-top: 1px solid #e4e4df;
}

.account-inquiry-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.account-inquiry-list summary > span {
  display: grid;
  gap: 5px;
}

.account-inquiry-list summary small,
.account-inquiry-list summary em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.account-inquiry-list details > p {
  padding: 0 0 20px;
  white-space: pre-wrap;
  line-height: 1.75;
}

.account-dashboard-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 44px;
  background: #e6e6e1;
}

.account-dashboard-panel {
  padding: 22px;
  background: #f7f7f4;
}

.account-dashboard-panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.account-dashboard-panel-heading h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.account-dashboard-panel-heading a {
  color: #777;
  font-size: 11px;
}

.account-stage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.account-stage-row a {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #111;
}

.account-stage-row em {
  color: #ccc;
  font-size: 14px;
  font-style: normal;
}

.account-stage-row strong {
  font-size: 22px;
  font-weight: 500;
}

.account-stage-row span {
  color: #777;
  font-size: 11px;
}

.account-stage-row-cancel {
  justify-content: space-around;
}

.account-stage-total {
  padding-left: 16px;
  border-left: 1px solid #ddd;
}

.account-dashboard-preview-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-list-stack {
  display: grid;
  gap: 12px;
}

.account-list-row {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid #ddd;
  background: #fff;
}

.account-list-row-link {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #111;
}

.account-list-row-link > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-list-row-link > span:last-child {
  align-items: flex-end;
}

.account-list-row-link strong {
  font-size: 13px;
  font-weight: 500;
}

.account-list-row-link small {
  color: #777;
  font-size: 12px;
}

.account-list-row-action {
  flex-shrink: 0;
  width: auto;
  min-height: 38px;
  margin-top: 0;
  padding: 0 16px;
}

.account-return-order-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e4e4df;
  background: #f7f7f4;
  font-size: 12px;
}

.account-return-order-picker span {
  color: #777;
}

.account-return-order-picker a {
  color: #111;
  border-bottom: 1px solid #111;
}

.account-return-item-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  color: #555;
  font-size: 12px;
}

.account-return-item-list li {
  padding: 4px 0;
}

.account-return-refund {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 500;
}

.account-return-type {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-return-type legend {
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  color: #555;
}

.account-return-type label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.account-return-items {
  display: grid;
  gap: 10px;
}

.account-return-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e4e4df;
  font-weight: normal;
}

.account-return-item small {
  display: block;
  color: #777;
  font-size: 11px;
}

.account-address-form select,
.account-address-form textarea,
.product-community-form input,
.product-community-form select,
.product-community-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d8d8d2;
  border-radius: 0;
  color: inherit;
  background: #fff;
  font: inherit;
}

.product-community-form {
  display: grid;
  gap: 14px;
  max-width: 680px;
  margin-bottom: 40px;
  padding: 24px;
  background: #f6f6f3;
}

.product-community-form h3 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
}

.product-community-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
}

.product-community-form button {
  min-height: 44px;
  border: 1px solid var(--ink);
  color: var(--paper);
  background: var(--ink);
}

.product-community-check {
  display: flex !important;
  align-items: center;
}

.product-community-check input {
  width: auto;
}

.product-community-list article {
  padding: 24px 0;
  border-top: 1px solid #e1e1dc;
}

.product-community-list article > header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: var(--muted);
  font-size: 11px;
}

.product-community-list article > header strong {
  color: var(--ink);
}

.product-question-preview-list[hidden],
.product-tab-empty[hidden] {
  display: none;
}

.product-community-list .product-question-item {
  padding: 20px 0;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.product-community-list .product-question-item:first-child {
  border-top: 1px solid var(--line);
}

.product-question-item-toggle {
  width: 100%;
  display: block;
  padding: 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  text-align: left;
}

.product-question-item-toggle.is-locked {
  cursor: default;
}

.product-question-item-category {
  display: block;
  margin-bottom: 8px;
  color: #666666;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.product-question-item-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.product-question-lock-mark {
  width: 18px;
  height: 20px;
  flex-shrink: 0;
  overflow: hidden;
  background: url('/assets/icons/lock-keyhole.svg') center / 16px 16px no-repeat;
  color: transparent;
  font-size: 0;
}

.product-question-item-title {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-question-item-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #777777;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.product-question-item-panel[hidden] {
  display: none;
}

.product-question-item-panel {
  padding: 16px 0 0;
}

.product-question-item-panel > p {
  margin: 0;
  color: #555555;
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.product-question-answer {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  margin-top: 20px;
  padding: 20px 24px;
  background: #f5f5f2;
}

.product-question-answer > span {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.product-question-answer strong {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 600;
}

.product-question-answer p {
  margin: 0;
  color: #555555;
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.7;
}

.product-question-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}

.product-question-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.product-question-heading button {
  padding: 4px 0;
  color: var(--muted);
  border: 0;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font-size: 12px;
}

.product-community-list h3 {
  margin: 14px 0 8px;
  font-size: 15px;
  font-weight: 600;
}

.product-community-list article > p,
.product-admin-reply p {
  white-space: pre-wrap;
  line-height: 1.75;
}

.product-question-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.product-question-attachments a {
  width: 64px;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
}

.product-question-attachments img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-admin-reply {
  margin-top: 16px;
  padding: 16px;
  background: #f3f3ef;
}

.product-admin-reply strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
}

.product-submission-note,
.product-submission-error {
  margin-bottom: 20px;
  padding: 13px 15px;
  background: #f2f2ee;
  font-size: 12px;
}

.product-community-action-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.product-community-action {
  width: min(100%, 360px);
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 17px 0 19px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.product-community-action:hover,
.product-community-action:focus-visible {
  color: var(--paper);
  border-color: var(--cobalt);
  background: var(--cobalt);
}

.product-community-action:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}

.product-community-action-arrow {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transition: transform 160ms ease;
}

.product-community-action:hover .product-community-action-arrow,
.product-community-action:focus-visible .product-community-action-arrow {
  transform: translateX(3px);
}

.product-question-modal[hidden] {
  display: none;
}

.product-question-modal {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.product-question-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(17, 17, 17, 0.48);
}

.product-question-modal-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(80vh, 820px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.22);
}

.product-question-modal-header {
  min-height: 66px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}

.product-question-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.product-question-modal-header button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 0;
  background: transparent;
}

.product-question-modal-header img {
  width: 20px;
  height: 20px;
}

.product-question-modal-scroll {
  min-height: 180px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 24px 24px;
}

.product-question-modal-state {
  margin: 0;
  padding: 56px 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.product-question-modal-retry {
  min-height: 42px;
  display: block;
  margin: 24px auto 0;
  padding: 0 22px;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: var(--paper);
}

.product-question-modal-sentinel {
  height: 1px;
}

.product-question-form-modal[hidden] {
  display: none;
}

.product-question-form-modal {
  position: fixed;
  z-index: 31;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.product-question-form-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(17, 17, 17, 0.48);
}

.product-question-form-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  box-shadow: 0 20px 60px rgba(17, 17, 17, 0.22);
}

.product-question-form-header {
  min-height: 66px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}

.product-question-form-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.product-question-form-header button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 0;
  background: transparent;
}

.product-question-form-header img {
  width: 20px;
  height: 20px;
}

.product-question-form-dialog > form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-question-form-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

.product-question-form-field {
  display: grid;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 13px;
}

.product-question-form-field > span,
.product-question-form-label {
  font-size: 14px;
  font-weight: 600;
}

.product-question-form-label {
  display: block;
}

.product-question-form-field input[type="text"],
.product-question-form-field select,
.product-question-form-field textarea {
  width: 100%;
  padding: 14px 16px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  font: inherit;
}

.product-question-form-field input[type="text"],
.product-question-form-field select {
  min-height: 50px;
}

.product-question-form-field textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.65;
}

.product-question-type-dropdown {
  position: relative;
}

.product-question-type-trigger {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px 0 16px;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: var(--paper);
  font: inherit;
  text-align: left;
}

.product-question-type-trigger img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform 180ms ease;
}

.product-question-type-dropdown.is-open .product-question-type-trigger img {
  transform: rotate(180deg);
}

.product-question-type-menu {
  position: absolute;
  z-index: 3;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 264px;
  overflow-y: auto;
  border: 1px solid var(--ink);
  border-top: 0;
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.12);
}

.product-question-type-menu[hidden] {
  display: none;
}

.product-question-type-menu button {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  color: var(--ink);
  border: 0;
  background: var(--paper);
  font: inherit;
  text-align: left;
}

.product-question-type-menu button + button {
  border-top: 1px solid var(--line);
}

.product-question-type-menu button:hover,
.product-question-type-menu button:focus-visible,
.product-question-type-menu button[aria-selected="true"] {
  background: var(--mist);
}

.product-question-form-field input::placeholder,
.product-question-form-field textarea::placeholder {
  color: #999999;
}

.product-question-form-field > small {
  color: var(--muted);
  font-size: 11px;
}

.product-question-form-field .is-invalid {
  border-color: #c62828;
  outline: 1px solid #c62828;
  outline-offset: -1px;
}

.product-question-form-field > .product-question-field-error {
  color: #c62828;
  font-size: 11px;
}

.product-question-selected-product {
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.018);
}

.product-question-selected-product > img {
  width: 64px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  background: var(--mist);
}

.product-question-selected-product > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.product-question-selected-product strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
}

.product-question-selected-product small {
  color: var(--muted);
  font-size: 11px;
}

.product-question-photo-picker,
.product-question-photo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.product-question-photo-list:empty {
  display: none;
}

.product-question-photo-item {
  position: relative;
  width: 84px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
}

.product-question-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-question-photo-item button {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--paper);
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.72);
  line-height: 1;
}

.product-question-photo-button {
  width: 84px;
  aspect-ratio: 3 / 4;
  display: inline-flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: var(--mist);
  cursor: pointer;
}

.product-question-photo-button > strong {
  font-size: 32px;
  font-weight: 200;
  line-height: 1;
}

.product-question-photo-button > span {
  font-size: 11px;
  line-height: 1;
}

.product-question-photo-button.is-hidden {
  display: none;
}

.product-question-photo-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.product-question-private-check {
  gap: 8px;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.product-question-guidance {
  margin-top: 8px;
  padding: 18px;
  color: var(--muted);
  background: var(--mist);
  font-size: 11px;
  line-height: 1.65;
}

.product-question-guidance > strong {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 12px;
}

.product-question-guidance ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 16px;
}

.product-question-error-modal[hidden] {
  display: none;
}

.product-question-error-modal {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.product-question-error-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(17, 17, 17, 0.46);
}

.product-question-error-dialog {
  position: relative;
  width: min(360px, 100%);
  padding: 28px 24px 20px;
  background: var(--paper);
  box-shadow: 0 16px 44px rgba(17, 17, 17, 0.2);
  text-align: center;
}

.product-question-error-dialog h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.product-question-error-dialog p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  word-break: keep-all;
}

.product-question-error-dialog > button {
  width: 100%;
  min-height: 46px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 13px;
}

.product-question-form-footer {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.product-question-form-footer button {
  width: 100%;
  min-height: 50px;
  color: var(--paper);
  border: 1px solid var(--cobalt);
  background: var(--cobalt);
  font-size: 14px;
  font-weight: 600;
}

.product-question-form-footer button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.product-question-form-footer .product-question-form-cancel {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
}

.product-submission-error {
  color: #8a1f1f;
  background: #fff0ef;
}

:root {
  --ink: #111111;
  --paper: #ffffff;
  --mist: #f7f5ef;
  --line: #d8d8d8;
  --muted: #555555;
  --cobalt: #1f45d8;
  --font-sans: "Noto Sans KR", Arial, sans-serif;
  --content-width: 1240px;
  --header-height: 64px;
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  scroll-behavior: smooth;
}

/* 본문이 짧아도 푸터가 화면 맨 아래에 붙도록 body를 화면 높이의 세로 flex로 두고 main이 남는 높이를 채운다. */
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

#main-content {
  flex: 1 0 auto;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  color: inherit;
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

.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;
}

.pc {
  display: block !important;
}

.pc-flex {
  display: flex !important;
}

.mo {
  display: none !important;
}

.primary-nav,
.utility-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 11px;
}

.brand-link img {
  width: 100%;
  height: auto;
}

.icon-button {
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 0;
  background: transparent;
}

.icon-button span {
  display: block;
  width: 20px;
  height: 1px;
  margin: 5px 0;
  background: var(--ink);
}

.home-hero video,
.home-hero picture,
.home-hero picture img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
}

.home-hero-overlay {
  position: absolute;
  z-index: 1;
  left: 32px;
  bottom: 38px;
  color: var(--paper);
}

.home-hero-overlay h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(48px, 6vw, 96px);
  font-weight: 400;
  line-height: 0.95;
}

.home-hero-eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: 10px;
}

.home-hero-overlay p {
  margin: 18px 0 26px;
  font-size: 14px;
}

.text-link-light {
  color: var(--paper);
}

.home-intro {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
  padding: 120px 0;
}

.section-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.home-intro h2 {
  max-width: 920px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(34px, 4vw, 64px);
  font-weight: 400;
  line-height: 1.08;
}

.home-intro > p:last-child {
  grid-column: 2;
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.editorial-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
  align-items: end;
}

.editorial-tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--mist);
}

.editorial-tile-tall img {
  aspect-ratio: 5 / 6;
}

.editorial-tile > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding-top: 18px;
}

.editorial-tile .section-kicker {
  grid-column: 1 / -1;
}

.editorial-tile h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 400;
}

.product-card h2,
.product-card h3,
.product-card p {
  margin: 0;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.product-card a:hover .product-image img {
  transform: scale(1.012);
}

.product-image > .product-sold-out {
  right: 10px;
  left: auto;
  color: var(--ink);
  background: var(--paper);
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  text-align: right;
}

.product-price-compare {
  color: var(--muted);
  text-decoration: line-through;
}

.product-price-discount {
  color: var(--cobalt);
  font-weight: 600;
}

.product-price-base {
  font-weight: 600;
}

.catalog-pending span,
.empty-state span {
  color: var(--muted);
  font-size: 12px;
}

.empty-state .text-link {
  margin-top: 20px;
}

.brand-banner {
  min-height: 380px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  color: var(--paper);
  background: var(--cobalt);
}

.brand-banner img {
  width: min(560px, 75vw);
  filter: invert(1);
  mix-blend-mode: screen;
}

.brand-banner p {
  margin: 0;
  font-size: 10px;
}

.collection-header {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 40px;
  padding-bottom: 34px;
}

.collection-header h1 {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 58px;
  font-weight: 400;
}

.collection-controls {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.collection-controls label {
  display: grid;
  gap: 7px;
}

.collection-controls label > span {
  color: var(--muted);
  font-size: 8px;
}

.collection-controls input,
.collection-controls select,
.collection-controls button {
  min-height: 32px;
  padding: 0 24px 0 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
  letter-spacing: 0;
}

.collection-controls input {
  width: 220px;
  padding-right: 0;
  outline: 0;
}

.collection-controls input::placeholder {
  color: var(--muted);
}

.collection-controls button {
  padding-right: 0;
}

.collection-body {
  padding-bottom: 140px;
}

.content-page-header {
  display: grid;
  gap: 18px;
  padding-top: 96px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--ink);
}

.content-page-header h1 {
  max-width: 900px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 58px;
  font-weight: 400;
}

.content-page-header > p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.content-page-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  min-height: 460px;
  padding-top: 64px;
  padding-bottom: 140px;
}

.content-page-sections article {
  align-self: start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.content-page-sections h2 {
  margin: 0 0 24px;
  font-size: 11px;
  font-weight: 500;
}

.content-page-sections p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.content-page-sections--document {
  grid-template-columns: minmax(0, 760px);
  gap: 40px;
}

.content-page-sections--document p,
.content-page-sections--document .content-page-list,
.content-page-sections--document .content-page-table {
  max-width: 760px;
}

.content-page-sections article > * + * {
  margin-top: 12px;
}

.content-page-list {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.content-page-list li + li {
  margin-top: 6px;
}

.content-page-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.content-page-table th,
.content-page-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.content-page-table th {
  width: 34%;
  padding-right: 20px;
  color: var(--ink);
  font-weight: 500;
}

.content-page-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-thumbnails img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.product-video-thumb {
  min-height: 84px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 9px;
}

.product-media-main {
  background: var(--mist);
}

.product-media-main img,
.product-media-main video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.product-media-empty {
  min-height: 640px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--mist);
  font-size: 11px;
}

.product-subtitle,
.product-price {
  margin: 0;
  font-size: 12px;
}

.variant-picker legend {
  margin-bottom: 12px;
  font-size: 10px;
}

.variant-picker > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

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

.variant-picker input:disabled + span {
  color: #aaa;
  text-decoration: line-through;
}

.variant-dropdown {
  position: relative;
  width: 100%;
  margin: 72px 0 28px;
}

.variant-dropdown-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 13px;
  text-align: left;
}

.variant-dropdown-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 180ms ease;
}

.variant-dropdown.is-open .variant-dropdown-icon {
  transform: rotate(180deg);
}

.variant-dropdown-menu {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--paper);
}

.variant-dropdown-menu[hidden] {
  display: none;
}

.variant-dropdown-choice {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  color: var(--ink);
  border: 0;
  background: var(--paper);
  font-size: 13px;
  text-align: left;
}

.variant-dropdown-choice + .variant-dropdown-choice {
  border-top: 1px solid var(--line);
}

.variant-dropdown-choice:hover,
.variant-dropdown-choice:focus-visible {
  background: var(--mist);
}

.variant-dropdown-choice:disabled {
  color: var(--muted);
  text-decoration: line-through;
}

.add-to-bag:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.product-copy {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.product-copy strong {
  color: var(--ink);
  font-weight: 400;
}

.cart-page-header {
  padding-top: 48px;
  padding-bottom: 24px;
}

.cart-page-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.cart-connection-note {
  min-height: 320px;
  display: grid;
  place-items: center;
  justify-items: center;
  gap: 10px;
  padding-bottom: 100px;
  text-align: center;
}

.cart-connection-note p {
  margin: 0;
  font-size: 16px;
}

.cart-connection-note span {
  color: var(--muted);
  font-size: 12px;
}

.cart-empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  justify-items: center;
  gap: 18px;
  padding-bottom: 120px;
  text-align: center;
}

.cart-empty-icon {
  width: 64px;
  height: 64px;
  opacity: 0.25;
}

.cart-empty p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  padding-bottom: 100px;
}

.cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
}

.cart-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.cart-select-all input {
  width: 18px;
  height: 18px;
}

.cart-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}

.cart-toolbar-actions button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.cart-toolbar-actions button:hover {
  color: var(--ink);
}

.cart-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart-item {
  display: grid;
  grid-template-columns: 24px 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item.is-unavailable {
  opacity: 0.55;
}

.cart-item-select input {
  width: 18px;
  height: 18px;
}

.cart-item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mist);
}

.cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: rgba(17, 17, 17, 0.6);
  font-size: 11px;
  font-weight: 600;
}

.cart-item-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.cart-item-name {
  font-size: 13px;
  font-weight: 500;
}

.cart-item-option {
  color: var(--muted);
  font-size: 12px;
}

.cart-item-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.cart-item-price-original {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 12px;
}

.cart-item-price strong {
  font-size: 14px;
  font-weight: 600;
}

.cart-item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
}

.cart-item-qty button {
  width: 30px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

.cart-item-qty input {
  width: 40px;
  height: 32px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
  font-size: 12px;
  -moz-appearance: textfield;
}

.cart-item-qty input::-webkit-outer-spin-button,
.cart-item-qty input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-item-remove {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cart-item-remove img {
  width: 14px;
  height: 14px;
}

.cart-summary {
  position: sticky;
  top: 28px;
  padding: 24px;
  border: 1px solid var(--line);
}

.cart-summary h2 {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 600;
}

.cart-summary-lines {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}

.cart-summary-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0;
  font-size: 13px;
}

.cart-summary-lines dt {
  color: var(--muted);
  font-weight: 400;
}

.cart-summary-lines dd {
  margin: 0;
  font-weight: 500;
}

.cart-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  font-size: 13px;
  font-weight: 500;
}

.cart-summary-total strong {
  font-size: 19px;
  font-weight: 700;
}

.cart-checkout-action {
  width: 100%;
  min-height: 50px;
  display: grid;
  place-items: center;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.cart-checkout-action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.checkout-header {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
  padding-top: 72px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.checkout-header h1 {
  margin: 0 auto 0 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 400;
}

.checkout-header > span {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
}

.checkout-connection-note,
.checkout-form-error {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 2px solid #a9813f;
  background: #f6f4ef;
  font-size: 11px;
}

.checkout-connection-note p,
.checkout-form-error {
  margin-bottom: 0;
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 72px;
  align-items: start;
  padding-top: 36px;
  padding-bottom: 140px;
}

.checkout-fields {
  border-top: 1px solid var(--ink);
}

.checkout-section {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  padding: 36px 0 44px;
  border-bottom: 1px solid var(--line);
}

.checkout-section-heading h2,
.checkout-summary-heading h2 {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 500;
}

.checkout-section-body {
  display: grid;
  gap: 22px;
}

.checkout-address-list {
  display: grid;
  gap: 10px;
}

.checkout-address-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  cursor: pointer;
}

.checkout-address-card.is-selected {
  border-color: var(--ink);
}

.checkout-address-card input {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  accent-color: var(--ink);
}

.checkout-address-card-body {
  display: grid;
  gap: 6px;
  font-size: 11px;
}

.checkout-address-card-body strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.checkout-address-card-body strong em {
  padding: 2px 6px;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 9px;
  font-style: normal;
}

.checkout-address-card-body span {
  color: var(--muted);
}

.checkout-address-empty {
  display: grid;
  gap: 6px;
  padding: 24px 16px;
  border: 1px dashed var(--line);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
}

.checkout-address-empty:hover {
  border-color: var(--ink);
}

.checkout-address-empty strong {
  font-size: 12px;
  font-weight: 500;
}

.checkout-address-empty span {
  color: var(--muted);
  font-size: 10px;
}

.checkout-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
}

.checkout-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.checkout-field-wide {
  grid-column: 1 / -1;
}

.checkout-field > span {
  font-size: 9px;
}

.checkout-field input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font: inherit;
  font-size: 11px;
}

.checkout-field em {
  color: var(--muted);
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
}

.checkout-field small,
.checkout-field-error {
  color: #a12a2a;
  font-size: 9px;
}

.checkout-summary {
  position: sticky;
  top: 28px;
  padding: 26px;
  border: 1px solid var(--line);
}

.checkout-summary-items {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}

.checkout-summary-items article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
}

.checkout-summary-media {
  width: 58px;
  aspect-ratio: 4 / 5;
  background: var(--mist);
}

.checkout-summary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.checkout-summary-items article > div:nth-child(2) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.checkout-summary-items strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-summary-items article span {
  color: var(--muted);
}

.checkout-totals {
  margin: 20px 0;
}

.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0;
  font-size: 10px;
}

.checkout-totals > div:last-child {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
  font-size: 12px;
}

.checkout-totals dt,
.checkout-totals dd {
  margin: 0;
}

.checkout-agreement {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 16px 0;
  font-size: 9px;
  line-height: 1.5;
}

.checkout-agreement input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
}

.checkout-toss-button {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  border: 1px solid #0064ff;
  background: #0064ff;
  font-size: 13px;
  font-weight: 500;
}

.checkout-toss-button:hover:not(:disabled) {
  background: #0052d4;
  border-color: #0052d4;
}

.checkout-toss-button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.checkout-ready {
  min-height: 70svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding-top: 80px;
  padding-bottom: 120px;
  text-align: center;
}

.checkout-ready h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 46px;
  font-weight: 400;
}

.checkout-ready strong {
  font-size: 11px;
  font-weight: 500;
}

.checkout-ready > p:not(.section-kicker) {
  max-width: 480px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.checkout-payment {
  min-height: 70svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  column-gap: 96px;
  align-content: center;
  padding-top: 88px;
  padding-bottom: 120px;
}

.checkout-payment-copy h1 {
  max-width: 580px;
  margin: 16px 0 24px;
  font-family: var(--font-sans);
  font-size: 48px;
  font-weight: 400;
}

.checkout-payment-copy > p:last-child {
  max-width: 480px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.checkout-payment-summary {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.checkout-payment-summary > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.checkout-payment-summary dt,
.checkout-payment-summary dd {
  min-width: 0;
  margin: 0;
}

.checkout-payment-summary dt {
  color: var(--muted);
}

.checkout-payment-summary dd {
  overflow-wrap: anywhere;
}

.checkout-payment-summary strong {
  font-size: 14px;
  font-weight: 500;
}

.checkout-payment-notice {
  grid-column: 2;
  margin-top: 24px;
  padding: 18px 0;
  border-bottom: 1px solid #a9813f;
  font-size: 10px;
}

.checkout-payment-notice p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.checkout-payment-button {
  grid-column: 2;
  width: 100%;
  min-height: 52px;
  margin-top: 26px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 10px;
}

.checkout-payment-button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.checkout-payment-status {
  grid-column: 2;
  min-height: 18px;
  margin: 12px 0 20px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
  text-align: center;
}

.checkout-payment > .text-link {
  grid-column: 2;
  justify-self: center;
}

.checkout-result-code {
  padding: 7px 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 9px;
}

.checkout-result-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.checkout-result-primary {
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0 24px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 10px;
}

.account-auth-shell {
  width: min(calc(100% - 32px), 460px);
  min-height: 680px;
  margin: 0 auto;
  padding: 86px 0 120px;
}

.account-auth-page {
  width: min(100%, 1440px);
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}

.account-login-page {
  grid-template-columns: 1fr;
}

.account-register-page {
  grid-template-columns: 1fr;
}

.account-login-page .account-auth-panel {
  width: min(calc(100% - 32px), 460px);
}

.account-register-page .account-auth-panel {
  width: min(calc(100% - 32px), 500px);
}

.account-register-page .account-auth-panel > header {
  text-align: center;
}

.account-login-page .account-auth-panel > header {
  margin-bottom: 48px;
  text-align: center;
}

.account-login-page .account-auth-panel h1 {
  margin: 0;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -.03em;
}

.account-auth-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}

.account-login-page .account-auth-form-tools {
  justify-content: flex-end;
}

.account-login-page .account-auth-divider {
  margin: 34px 0 22px;
}

.account-login-page .account-social-actions {
  margin: 0;
}

.account-recovery-links {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
}

.account-recovery-links a {
  color: #444;
  padding: 0 24px;
  font-size: 13px;
  line-height: 1;
  text-decoration: none;
}

.account-recovery-links a + a {
  border-left: 1px solid #d5d5d1;
}

.account-general-signup-button {
  min-height: 50px;
  display: grid;
  place-items: center;
  margin-top: 10px;
  color: var(--ink);
  border: 1px solid #cfcfca;
  font-size: 11px;
  text-decoration: none;
}

.account-general-signup-button:hover {
  border-color: #a9a9a4;
}

.account-recovery-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.account-recovery-tabs a {
  padding: 15px 8px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 11px;
  text-align: center;
  text-decoration: none;
}

.account-recovery-tabs a.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.account-auth-panel {
  width: min(calc(100% - 64px), 500px);
  align-self: center;
  justify-self: center;
  padding: 72px 0 88px;
}

.account-auth-panel > header {
  margin-bottom: 38px;
}

.account-auth-panel h2 {
  margin: 8px 0 12px;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -.03em;
}

.account-auth-panel header > p:last-child {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.account-auth-shell header {
  margin-bottom: 44px;
}

.account-auth-shell h1,
.account-header h1 {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 52px;
  font-weight: 400;
}

.account-connection-note,
.account-form-error,
.account-success-note {
  margin: 0 0 28px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}

.account-connection-note p {
  margin: 6px 0 0;
  color: var(--muted);
}

.account-form-error {
  color: #a2271e;
}

.account-success-note {
  color: #315b48;
}

.account-form-error p,
.account-success-note p {
  margin: 7px 0 0;
  line-height: 1.6;
}

.account-auth-form {
  display: grid;
  gap: 24px;
}

.account-auth-form > label:not(.account-check) {
  display: grid;
  gap: 8px;
}

.account-auth-control {
  display: grid;
  gap: 8px;
}

.account-auth-control > label {
  font-size: 9px;
}

.account-auth-field-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.account-register-page .account-auth-field-pair {
  grid-template-columns: 1fr;
  gap: 24px;
}

.account-auth-field-pair > label {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.account-auth-form label > span,
.account-auth-form label > em {
  font-size: 9px;
  font-style: normal;
}

.account-auth-form label > em {
  color: var(--muted);
}

.account-required-mark {
  color: #a2271e;
  font-size: inherit;
  font-weight: 500;
}

.account-auth-form input:not([type="checkbox"]):not([type="radio"]),
.account-auth-form select {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.account-auth-form input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),
.account-auth-form select[aria-invalid="true"] {
  border-bottom-color: #a2271e;
}

.account-auth-form select:invalid {
  color: #aaa;
}

.account-auth-form select option {
  color: var(--ink);
}

.account-auth-form input[type="date"] {
  color: #aaa;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.account-auth-form input[type="date"]:valid {
  color: var(--ink);
}

.account-auth-form input[type="date"]::-webkit-datetime-edit {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}

.account-gender-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.account-gender-field legend {
  margin: 0 0 8px;
  padding: 0;
  font-size: 9px;
}

.account-gender-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.account-gender-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.account-gender-option input {
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
  opacity: 0;
}

.account-auth-form .account-gender-option > span {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px solid #d8d8d4;
  font-size: 11px;
  font-weight: 400;
}

.account-gender-option input:checked + span {
  color: var(--paper);
  border-color: var(--ink);
  background: var(--ink);
}

.account-gender-option input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.account-gender-field.is-invalid .account-gender-option > span {
  border-color: #a2271e;
}

.account-gender-field > small {
  display: block;
  margin-top: 8px;
}

.account-password-entry {
  min-width: 0;
}

.account-auth-form .account-password-feedback[hidden] {
  display: none;
}

.account-auth-form .account-password-feedback {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
}

.account-password-feedback[data-state="invalid"] {
  color: #a2271e;
}

.account-password-feedback[data-state="valid"] {
  color: #247147;
}

.account-password-field {
  position: relative;
  display: block;
  font-size: inherit;
}

.account-password-field input:not([type="checkbox"]) {
  padding-right: 48px;
}

.account-password-field button {
  width: 42px;
  height: 42px;
  position: absolute;
  right: 0;
  bottom: 2px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.account-password-field button img {
  width: 17px;
  height: 17px;
  opacity: .62;
}

.account-auth-form input::placeholder {
  color: #aaa;
  font: inherit;
  opacity: 1;
}

.account-auth-form small {
  color: #a2271e;
  font-size: 10px;
}

.account-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.account-check input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.account-check.is-invalid input {
  appearance: none;
  border: 1px solid #a2271e;
  border-radius: 0;
  background: transparent;
  outline: 0;
  box-shadow: none;
}

.account-check small {
  grid-column: 2;
}

.account-check a {
  border-bottom: 1px solid currentColor;
}

.account-consent-list {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.account-auth-form-tools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: -8px;
}

.account-auth-form-tools > span {
  max-width: 280px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.6;
}

.account-auth-form > button {
  min-height: 50px;
  margin-top: 8px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 10px;
}

.account-auth-form > button:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.account-password-link {
  justify-self: end;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  font-size: 9px;
}

.account-auth-switch {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.account-auth-panel .account-auth-switch {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.account-auth-switch a {
  margin-left: 6px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
}

.account-header {
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 60px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.account-header form button {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-size: 9px;
}

.account-layout,
.account-dashboard {
  display: grid;
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  gap: 72px;
  padding-top: 44px;
  padding-bottom: 140px;
}

.account-profile > p {
  margin: 0 0 24px;
  font-size: 9px;
}

.account-profile dl {
  margin: 0;
}

.account-profile dl > div {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.account-profile dt,
.account-profile dd {
  margin: 0;
  font-size: 11px;
}

.account-profile dt {
  margin-bottom: 7px;
  color: var(--muted);
}

.account-verification-form {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 22px;
}

.account-verification-form button {
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-size: 9px;
}

.account-verification-form button:disabled {
  color: var(--muted);
  border-bottom-color: var(--line);
}

.account-verification-form small {
  color: var(--muted);
  font-size: 9px;
}

.account-verification-result {
  min-height: 620px;
}

.account-orders .empty-state {
  min-height: 320px;
}

.account-saved {
  padding-top: 18px;
  padding-bottom: 18px;
  color: #315b48;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.account-main {
  min-width: 0;
  display: grid;
  gap: 76px;
}

.account-section-header {
  min-height: 70px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}

.account-section-header p,
.account-detail-heading p {
  margin: 0 0 8px;
  font-size: 9px;
}

.account-section-header h2,
.account-detail-heading h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
}

.account-section-header > span {
  color: var(--muted);
  font-size: 10px;
}

.account-action-link {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font-size: 9px;
}

.account-order-list,
.account-address-list {
  border-bottom: 1px solid var(--line);
}

.account-order-row {
  min-height: 122px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) minmax(130px, auto) 18px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.account-order-row:last-child,
.account-address-row:last-child {
  border-bottom: 0;
}

.account-order-thumb,
.account-order-item-media {
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--mist);
  color: var(--muted);
  font-size: 8px;
}

.account-order-thumb img,
.account-order-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-order-copy,
.account-order-status {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.account-order-copy time,
.account-order-copy span,
.account-order-status span {
  color: var(--muted);
  font-size: 9px;
}

.account-order-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-order-status {
  justify-items: end;
}

.account-order-status strong {
  font-size: 11px;
  font-weight: 500;
}

.account-row-arrow {
  font-size: 15px;
}

.account-address-empty {
  min-height: 190px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  border-bottom: 1px solid var(--line);
}

.account-address-empty p {
  margin: 0;
  font-size: 12px;
}

.account-address-empty span {
  color: var(--muted);
  font-size: 10px;
}

.account-address-row {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.account-address-row p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.account-address-row p strong {
  font-size: 12px;
  font-weight: 500;
}

.account-address-row p span {
  padding: 4px 6px;
  color: #315b48;
  border: 1px solid #a9c5b7;
  font-size: 8px;
}

.account-address-row address,
.account-order-detail address {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  line-height: 1.8;
}

.account-address-actions {
  display: flex;
  gap: 18px;
}

.account-address-actions a,
.account-address-actions button {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-size: 9px;
}

.account-address-form-shell {
  padding-top: 52px;
  padding-bottom: 140px;
}

.account-address-form {
  width: min(100%, 760px);
  margin: 0 auto;
}

.account-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px;
}

.account-field-grid label {
  display: grid;
  gap: 8px;
}

.account-field-grid label > span {
  font-size: 9px;
}

.account-field-grid input {
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
}

.account-field-grid small {
  color: #a2271e;
  font-size: 10px;
}

.account-field-wide {
  grid-column: 1 / -1;
}

.account-default-check {
  margin-top: 30px;
}

.account-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 38px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 10px;
}

.account-order-detail {
  padding-top: 44px;
  padding-bottom: 140px;
}

.account-order-summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.account-order-summary > p {
  margin: 0;
  font-size: 11px;
}

.account-order-summary > div {
  display: flex;
  gap: 24px;
  font-size: 10px;
}

.account-order-summary span {
  color: var(--muted);
}

.account-order-items {
  margin-top: 54px;
}

.account-order-item {
  min-height: 142px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.account-order-item > div:not(.account-order-item-media) {
  display: grid;
  gap: 8px;
}

.account-order-item > div > strong,
.account-order-item > strong {
  font-size: 11px;
  font-weight: 500;
}

.account-order-item span,
.account-order-item small {
  color: var(--muted);
  font-size: 9px;
}

.account-order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  margin-top: 72px;
}

.account-detail-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink);
}

.account-order-detail address {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.account-order-detail address strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
}

.account-tracking,
.account-payment-summary {
  margin: 0;
}

.account-tracking > div,
.account-payment-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.account-tracking dt,
.account-tracking dd,
.account-payment-summary dt,
.account-payment-summary dd {
  margin: 0;
  font-size: 10px;
}

.account-tracking-link {
  margin-left: 8px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-tracking dt,
.account-payment-summary dt {
  color: var(--muted);
}

.account-payment-summary > div:last-child {
  padding-top: 20px;
  border-bottom-color: var(--ink);
}

.error-page {
  min-height: 60svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 40px;
  text-align: center;
}

.error-page h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 400;
}

/* Figma storefront alignment: nodes 29:2, 29:3, and 29:4. */
h1,
h2,
h3,
.primary-nav {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.content-width {
  width: min(calc(100% - 110px), var(--content-width));
  margin-inline: auto;
}

.announcement {
  min-height: 24px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: #030303;
}

.announcement p {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}

.header-row {
  position: relative;
  min-height: 64px;
  display: grid;
  grid-template-columns: 40px 272px minmax(0, 1fr) auto;
  grid-template-areas: "category brand navigation utility";
  align-items: center;
  gap: 28px;
  padding: 0 55px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.category-drawer-trigger {
  grid-area: category;
  justify-self: start;
}

.brand-link {
  display: block;
  grid-area: brand;
  width: 272px;
}

.primary-nav {
  position: absolute;
  left: 50%;
  justify-content: center;
  gap: clamp(24px, 3vw, 56px);
  font-size: 12px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.utility-nav {
  grid-area: utility;
  justify-content: flex-end;
  gap: 22px;
  font-size: 12px;
}

.utility-nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.utility-nav img {
  width: 20px;
  height: 20px;
}

.utility-cart-link {
  position: relative;
}

/* Desktop keeps no search entry point in .utility-nav; only the mobile
   app-bar (≤900px, scoped pages below) turns this back on. */
.utility-search-link {
  display: none;
}

.cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.icon-button img {
  width: 20px;
  height: 20px;
}

.category-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(17, 17, 17, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.category-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  border-right: 1px solid var(--line);
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}

body.category-drawer-open .category-drawer-overlay {
  opacity: 1;
  visibility: visible;
}

body.category-drawer-open .category-drawer {
  transform: translateX(0);
}

.category-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.06);
}

.category-drawer-logo {
  display: block;
  width: 180px;
}

.category-drawer-logo img {
  width: 100%;
  height: auto;
}

.category-drawer-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.category-drawer-close img {
  width: 20px;
  height: 20px;
}

.category-drawer-empty {
  padding: 24px;
  font-size: 13px;
}

.category-drawer-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.category-drawer-parents {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}

.category-drawer-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 18px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.category-drawer-parent img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: rotate(-90deg);
  opacity: 0.4;
}

.category-drawer-parent.is-active {
  color: var(--paper);
  background: var(--ink);
}

.category-drawer-parent.is-active img {
  filter: invert(1);
  opacity: 1;
}

.category-drawer-children {
  flex: 1;
  overflow-y: auto;
  background: var(--mist);
}

.category-drawer-panel {
  display: none;
  flex-direction: column;
}

.category-drawer-panel.is-active {
  display: flex;
}

.category-drawer-panel a {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.category-drawer-view-all {
  color: var(--ink);
  font-weight: 600;
}

.gnb-strip {
  display: none;
}

.bottom-nav {
  display: none;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.bottom-nav-item img {
  width: 24px;
  height: 24px;
}

.bottom-nav-icon {
  position: relative;
  display: inline-flex;
}

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.recent-rail {
  width: 112px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(17, 17, 17, 0.1);
}

.scroll-top-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 4px 24px rgba(17, 17, 17, 0.1);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.scroll-top-button.is-visible {
  opacity: 1;
  visibility: visible;
}

.scroll-top-button img {
  width: 18px;
  height: 18px;
}

.recent-rail-head {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.recent-rail-title {
  width: 100%;
  display: block;
  padding: 0 24px 0 8px;
  color: var(--ink);
  white-space: nowrap;
}

.recent-rail-title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recent-rail-close {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(-50%);
}

.recent-rail-close img {
  display: block;
  width: 12px;
  height: 12px;
}

.recent-rail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 240ms ease;
}

.recent-rail-viewport {
  height: 310px;
  padding: 10px;
  overflow: hidden;
}

.recent-rail-viewport[data-visible-count="1"] {
  height: 110px;
}

.recent-rail-viewport[data-visible-count="2"] {
  height: 210px;
}

.recent-rail-nav {
  width: 100%;
  min-height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: pointer;
}

.recent-rail-nav:first-of-type {
  border-bottom: 1px solid var(--line);
}

.recent-rail-nav:last-child {
  border-top: 1px solid var(--line);
}

.recent-rail-nav:hover:not(:disabled) {
  background: var(--mist);
}

.recent-rail-nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.recent-rail-nav img {
  width: 15px;
  height: 15px;
}

.recent-rail-list li a {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
}

.recent-rail-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-carousel {
  position: relative;
  overflow: hidden;
}

.home-hero-controls {
  position: absolute;
  z-index: 2;
  right: 32px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
}

.home-hero-controls button {
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
}

.home-hero-toggle {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  font-size: 10px;
}

.home-hero-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.home-hero-counter-divider {
  color: var(--muted);
}

.home-hero-counter [data-hero-current] {
  font-size: 13px;
  font-weight: 700;
}

.home-hero-track {
  width: 100%;
  overflow: hidden;
}

.home-hero-track > .swiper-wrapper > .home-hero {
  width: 100%;
  flex-shrink: 0;
}

.home-hero {
  position: relative;
  aspect-ratio: 2.5 / 1;
  height: auto;
  min-height: 480px;
  max-height: 820px;
  overflow: hidden;
  background: var(--paper);
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  display: none;
}

.home-hero-copy {
  display: none;
}

.home-hero-copy h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 500;
  line-height: 1.25;
}

.home-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.home-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.category-shortcuts {
  padding: 40px 0 8px;
}

.category-shortcuts-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.category-shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 84px;
}

.category-shortcut-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mist);
}

.category-shortcut-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.category-shortcut-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.product-section {
  padding: 96px 0 64px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 32px;
  text-align: center;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.4;
}

.text-link {
  display: inline-block;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 12px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-block: 0;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.section-more {
  display: flex;
  justify-content: center;
}

.section-more-btn {
  width: auto;
  min-width: 180px;
  min-height: 46px;
  margin: 32px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
}

.product-card {
  position: relative;
  min-width: 0;
}

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--mist);
}

.product-image > span {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 8px;
  border-radius: 0;
  color: var(--paper);
  background: var(--ink);
  font-size: 9px;
}

.product-info {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 12px;
  font-size: 13px;
}

.product-info-link {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.product-info-link .product-price-compare {
  font-size: 11px;
}

.product-info-link .product-price-row {
  margin-top: 1px;
}

.product-wishlist-form {
  flex-shrink: 0;
}

.product-info h2,
.product-info h3 {
  font-size: inherit;
  font-weight: 400;
}

.product-wishlist {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.product-wishlist img {
  width: 20px;
  height: 20px;
}

.catalog-pending,
.empty-state {
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  background: #f6f6f4;
  text-align: center;
}

.catalog-pending p,
.empty-state p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 400;
}

.collection-page {
  padding-top: 28px;
  padding-bottom: 140px;
}

.products-header {
  text-align: center;
}

.products-header h1 {
  margin: 0;
  font-size: 46px;
  font-weight: 500;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 24px;
  overflow-x: auto;
}

.category-tab {
  padding-bottom: 4px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

.category-tab:hover {
  color: var(--ink);
}

.category-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.collection-divider {
  margin: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.collection-toolbar-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.filter-dropdown {
  position: relative;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}

.filter-button::-webkit-details-marker {
  display: none;
}

.filter-button img {
  width: 14px;
  height: 14px;
}

.filter-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  padding: 0 20px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.filter-panel details {
  border-top: 1px solid var(--line);
}

.filter-panel details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.filter-panel summary {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.filter-panel summary::-webkit-details-marker {
  display: none;
}

.filter-panel summary::after {
  content: "+";
  font-size: 14px;
}

.filter-panel details[open] summary::after {
  content: "–";
}

.filter-panel details label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.filter-panel select,
.filter-panel input[type="number"],
.collection-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-size: 12px;
}

.price-filter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 6px;
  align-items: center;
  padding-bottom: 16px;
}

.collection-search {
  display: grid;
  gap: 8px;
  margin: 20px 0 8px;
  font-size: 12px;
}

.filter-submit {
  width: 100%;
  min-height: 44px;
  margin: 22px 0 20px;
  color: var(--paper);
  border: 0;
  background: var(--ink);
  font-size: 12px;
}

.collection-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.collection-toolbar-actions select {
  min-width: 100px;
  padding: 0 22px 4px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-size: 12px;
}

.product-grid-collection {
  row-gap: 48px;
}

.products-more {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.products-more-button {
  min-width: 180px;
  min-height: 46px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.products-more-button.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.products-more-count {
  color: var(--muted);
}

.collection-page .empty-state {
  margin-top: 24px;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 666px) minmax(330px, 1fr);
  gap: 24px;
  padding-top: 32px;
  padding-bottom: 96px;
}

.product-gallery {
  display: grid;
  grid-template-columns: 82px minmax(0, 560px);
  gap: 24px;
}

.product-thumbnails {
  position: sticky;
  top: 16px;
  align-self: start;
  display: grid;
  gap: 10px;
}

.product-thumbnails button {
  padding: 0;
  border: 1px solid transparent;
  background: var(--mist);
}

.product-thumbnails button:focus-visible {
  border-color: var(--ink);
}

.product-thumbnails button.is-active {
  border-color: var(--ink);
}

.product-thumbnails img,
.product-video-thumb {
  min-height: 0;
  aspect-ratio: 82 / 112;
}

.product-media-main figure {
  display: none;
  margin: 0;
  aspect-ratio: 750 / 940;
  overflow: hidden;
}

.product-media-main figure.is-active {
  display: block;
}

.product-media-count {
  display: none;
}

.product-purchase {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 26px 0;
}

.product-purchase form {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-purchase-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}

.product-purchase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.product-breadcrumb {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.product-breadcrumb a {
  color: var(--muted);
}

.product-breadcrumb span {
  margin: 0 4px;
}

.product-purchase h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
}

.product-price-actions-row {
  display: block;
  margin-top: 12px;
}

.product-detail-price-block {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.product-consumer-price,
.product-detail-price-block .product-price-row {
  display: contents;
  margin: 0;
  text-align: left;
}

.product-consumer-price {
  font-size: 13px;
}

.product-detail-price-block .product-price-row {
  font-size: 17px;
}

.product-title-actions {
  position: absolute;
  top: 26px;
  right: 0;
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}

.product-title-actions .icon-button {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 0;
  background: transparent;
}

.product-title-actions .icon-button img {
  width: 100%;
  height: 100%;
}

.share-feedback {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 5px 10px;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ink);
  font-size: 11px;
}

.share-feedback[hidden] {
  display: none;
}

.product-subtitle {
  margin-top: 7px;
  color: var(--muted);
}

.product-shipping-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-shipping-label {
  flex-shrink: 0;
  padding-top: 1px;
  color: var(--muted);
  font-size: 12px;
}

.product-shipping-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-shipping-fee {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.product-shipping-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.product-shipping-link {
  margin-top: 2px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

.product-price {
  margin-top: 12px;
  font-size: 17px;
}

.variant-picker {
  margin: 72px 0 28px;
  padding: 0;
  border: 0;
}

.product-option-sheet-backdrop,
.product-option-sheet-header {
  display: none;
}

.product-option-sheet {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-option-sheet-body {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.product-option-sheet-body > .product-quantity-picker {
  margin-top: auto;
}

.variant-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.variant-heading legend {
  margin: 0;
  font-size: 13px;
}

.variant-picker > div:last-child {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.variant-picker span {
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 11px;
}

.variant-picker input:checked + span {
  color: var(--ink);
  border-color: var(--ink);
  border-width: 2px;
  background: var(--paper);
}

.product-quantity-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: rgba(17, 17, 17, 0.04);
}

.product-quantity-label {
  color: var(--muted);
  font-size: 12px;
}

.product-quantity-value {
  display: flex;
  align-items: center;
  gap: 14px;
}

.option-line-price {
  justify-self: end;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.option-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.option-line {
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.option-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.option-line-name {
  font-size: 13px;
}

.option-line-remove {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 16px;
  line-height: 1;
}

.option-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.option-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.option-total strong {
  font-weight: 600;
}

.option-total-count,
.option-total-single {
  display: none;
}

.quantity-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line);
}

.quantity-stepper .quantity-step {
  width: 38px;
  border: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1;
}

.quantity-stepper .quantity-step:disabled {
  color: var(--muted);
}

.quantity-stepper input[type="number"] {
  width: 52px;
  min-height: 44px;
  padding: 0;
  color: var(--ink);
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  font-size: 13px;
  text-align: center;
  -moz-appearance: textfield;
}

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

.add-to-bag {
  width: 100%;
  min-height: 48px;
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
  font-size: 12px;
}

.product-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.product-cta-row .add-to-bag,
.product-cta-row .buy-now {
  width: auto;
  min-height: 48px;
  font-size: 12px;
}

.product-cta-row .add-to-bag {
  color: var(--ink);
  border: 1px solid var(--ink);
  background: var(--paper);
}

.buy-now {
  color: var(--paper);
  border: 1px solid var(--ink);
  background: var(--ink);
}

.buy-now:disabled {
  color: var(--muted);
  border-color: var(--line);
  background: var(--mist);
}

.product-accordions {
  border-top: 1px solid var(--line);
}

.product-accordions details {
  border-bottom: 1px solid var(--line);
}

.product-accordions summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  list-style: none;
}

.product-accordions summary::-webkit-details-marker {
  display: none;
}

.product-accordions summary::after {
  content: "+";
  font-weight: 400;
}

.product-accordions details[open] summary::after {
  content: "–";
}

.product-accordions p,
.product-accordions a {
  margin: -4px 0 20px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.product-policy .product-accordions {
  display: grid;
  gap: 12px;
  border-top: 0;
}

.product-policy .product-accordions details {
  border: 1px solid var(--line);
}

.product-policy .product-accordions summary {
  min-height: 56px;
  padding: 0 20px;
  background: rgba(17, 17, 17, 0.04);
  font-weight: 600;
}

.product-policy .product-accordions details[open] summary {
  border-bottom: 1px solid var(--line);
}

.product-policy .product-accordions summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.product-policy .product-accordions details[open] summary::after {
  content: "";
  transform: rotate(-135deg);
}

.product-policy .product-accordions > details > p {
  margin: 0;
  padding: 18px 20px;
}

.product-policy .product-accordions > details > .product-notice-table {
  margin: 0;
}

.product-description-html {
  margin-bottom: 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.9;
}

.product-description-html :first-child {
  margin-top: 0;
}

.product-description-html p {
  margin: 0 0 1.4em;
}

.product-description-html img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 24px auto;
}

.product-description-wrap {
  position: relative;
  max-height: 640px;
  overflow: hidden;
}

.product-description-wrap.is-expanded {
  max-height: none;
  overflow: visible;
}

.product-description-wrap.has-overflow:not(.is-expanded)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper));
  pointer-events: none;
}

.product-description-more {
  width: auto;
  min-width: 180px;
  min-height: 46px;
  margin: 24px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
}

.product-description-more[hidden] {
  display: none;
}

.product-description-more::after {
  content: "+";
  font-size: 14px;
}

.product-description-more.is-expanded::after {
  content: "–";
}

.product-detail-tabs {
  padding-top: 64px;
}

.product-policy {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.product-policy-notice,
.product-policy .product-accordions {
  max-width: 860px;
  margin-inline: auto;
}

.product-policy-notice {
  margin-bottom: 48px;
  text-align: center;
}

.product-policy-notice > summary {
  cursor: default;
  list-style: none;
}

.product-policy-notice > summary::-webkit-details-marker {
  display: none;
}

.product-policy-toggle-icon {
  display: none;
}

.product-tabs-nav {
  display: flex;
  justify-content: center;
  gap: 40px;
  border-bottom: 1px solid var(--line);
}

.product-tab {
  padding: 0 0 16px;
  color: var(--muted);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-size: 14px;
  white-space: nowrap;
}

.product-tab:hover {
  color: var(--ink);
}

.product-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.product-tab-panel {
  padding: 40px 0;
}

.product-tab-panel[hidden] {
  display: none;
}

.product-tab-panel .product-description-html {
  margin-bottom: 0;
}

.product-tab-empty {
  min-height: 200px;
  display: grid;
  place-items: center;
  gap: 10px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.product-tab-empty .text-link {
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  font-size: 12px;
}

.product-notice-table {
  width: 100%;
  margin-bottom: 20px;
  border-collapse: collapse;
  font-size: 12px;
}

.product-notice-table th,
.product-notice-table td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.product-notice-table tr:last-child th,
.product-notice-table tr:last-child td {
  border-bottom: 0;
}

.product-notice-table th {
  width: 35%;
  color: var(--ink);
  background: rgba(17, 17, 17, 0.04);
  font-weight: 500;
}

.product-notice-table td {
  color: var(--muted);
}

.product-policy-notice .product-notice-table {
  border: 1px solid var(--line);
}

.product-policy-notice .product-notice-table th,
.product-policy-notice .product-notice-table td {
  border: 1px solid var(--line);
}

.related-products {
  padding-bottom: 80px;
}

.site-footer {
  display: block;
  padding: 0 max(55px, calc((100% - var(--content-width)) / 2));
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.footer-business {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "company policy"
    "copyright copyright";
  gap: 12px 48px;
  padding: 24px 0 32px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.footer-business p {
  margin: 0;
}

.footer-policy {
  grid-area: policy;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.footer-policy a {
  color: inherit;
}

.footer-company-info {
  grid-area: company;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, max-content));
  gap: 4px 48px;
}

.footer-copyright {
  grid-area: copyright;
}

/* Responsive overrides: keep desktop styles above and only differences below. */
@media (max-width: 1180px) {
  .header-row {
    grid-template-columns: 40px 220px minmax(0, 1fr) auto;
    padding-inline: 32px;
  }

  .brand-link {
    width: 220px;
  }

  .primary-nav {
    gap: 22px;
  }

  .utility-nav {
    gap: 16px;
  }
}

@media (max-width: 900px) {
  .mobile-member-nav {
    width: 100%;
    margin-top: 12px;
    padding-top: 24px;
    border-top: 1px solid #ddd;
  }

  .mobile-member-nav a,
  .mobile-member-nav button {
    display: block;
    padding: 8px 0;
    border: 0;
    color: #111;
    background: transparent;
    font: inherit;
    text-align: left;
  }

  .account-overview-shell {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px 16px 88px;
  }

  .account-overview-shell .account-side-nav {
    display: none;
  }

  .account-overview-shell.is-section-view {
    display: block;
  }

  .account-overview-shell.is-section-view .account-overview-content {
    width: 100%;
  }

  .account-mobile-menu {
    width: 100%;
    margin: 4px 0 0;
    border-top: 8px solid #f2f2f2;
  }

  .account-mobile-menu-group {
    border-bottom: 1px solid var(--line);
    background: var(--paper);
  }

  .account-mobile-menu-group summary {
    position: relative;
    min-height: 58px;
    display: flex;
    align-items: center;
    padding: 0 48px 0 16px;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
  }

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

  .account-mobile-menu-group summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 8px;
    height: 8px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease;
  }

  .account-mobile-menu-group[open] summary::after {
    transform: translateY(-35%) rotate(225deg);
  }

  .account-mobile-menu-links {
    border-top: 1px solid #eeeeee;
    background: #fafafa;
  }

  .account-mobile-menu-links a {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    border-bottom: 1px solid #eeeeee;
    color: #444444;
    font-size: 14px;
    white-space: nowrap;
  }

  .account-mobile-menu-links a span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-mobile-menu-links a:last-child {
    border-bottom: 0;
  }

  .account-mobile-menu-links a span:last-child {
    color: #999999;
    font-size: 20px;
  }

  .account-side-nav {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    padding: 0;
  }

  .account-nav-group a {
    min-width: 0;
    border-bottom: 1px solid #eee;
  }

  .account-overview-heading h1 {
    font-size: 24px;
    line-height: 1.4;
  }

  .account-dashboard-row {
    grid-template-columns: 1fr;
  }

  .account-dashboard-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-list-row {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
  }

  .account-list-row-link {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-list-row-link > span:last-child {
    align-items: flex-start;
  }

  .account-list-row-action {
    width: 100%;
  }

  .account-heading-with-action {
    align-items: stretch;
    flex-direction: column;
  }

  .account-heading-with-action .account-outline-button {
    margin-bottom: 18px;
  }

  .account-address-grid,
  .account-wishlist-grid,
  .account-recent-list {
    grid-template-columns: 1fr;
  }

  .account-profile-details > div {
    grid-template-columns: 90px minmax(0, 1fr);
  }

  .account-settings-stack {
    gap: 44px;
  }

  .account-settings-heading {
    min-height: 58px;
  }

  .account-settings-heading > span {
    display: none;
  }

  .account-settings-submit {
    width: 100%;
  }

  .account-social-status-list > div {
    align-items: flex-start;
    padding: 16px 0;
  }

.account-overview-shell.is-menu-view .account-overview-recent {
    display: none;
  }

  .account-wishlist-grid,
  .account-recent-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-join-steps span {
    font-size: 10px;
  }

  .product-community-form {
    padding: 18px 14px;
  }

  .product-community-action-wrap {
    margin-top: 20px;
  }

  .product-community-action {
    width: 100%;
  }

  .product-question-heading {
    min-height: 54px;
  }

  .product-question-heading h2 {
    font-size: 15px;
  }

  .product-community-list .product-question-item {
    padding: 18px 0;
  }

  .product-question-item-title {
    font-size: 15px;
  }

  .product-question-item-panel {
    padding: 16px 0 0;
  }

  .product-question-answer {
    padding: 16px;
  }

  .product-question-modal {
    align-items: end;
    padding: 0;
  }

  .product-question-modal-dialog {
    width: 100%;
    max-height: 82dvh;
    box-shadow: 0 -12px 36px rgba(17, 17, 17, 0.2);
  }

  .product-question-modal-header {
    min-height: 58px;
    padding: 0 var(--mobile-content-gutter);
  }

  .product-question-modal-header h2 {
    font-size: 16px;
  }

  .product-question-modal-scroll {
    padding: 0 var(--mobile-content-gutter) calc(24px + env(safe-area-inset-bottom));
  }

  .product-question-form-modal {
    align-items: end;
    padding: 0;
  }

  .product-question-form-dialog {
    width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    box-shadow: 0 -12px 36px rgba(17, 17, 17, 0.2);
  }

  .product-question-form-header {
    min-height: 58px;
    padding: 0 var(--mobile-content-gutter);
  }

  .product-question-form-header h2 {
    font-size: 16px;
  }

  .product-question-form-scroll {
    padding: 20px var(--mobile-content-gutter);
  }

  .product-question-form-field {
    margin-bottom: 20px;
  }

  .product-question-form-field textarea {
    min-height: 170px;
  }

  .product-question-form-footer {
    padding: 12px var(--mobile-content-gutter) calc(12px + env(safe-area-inset-bottom));
  }

  .pc,
  .pc-flex {
    display: none !important;
  }

  .mo {
    display: block !important;
  }

  .utility-nav a:not(.utility-cart-link) {
    display: none;
  }

  .utility-nav {
    justify-content: center;
  }

  body.menu-open .primary-nav {
    display: flex;
  }

  .home-hero-overlay {
    left: 16px;
    bottom: 24px;
  }

  .home-hero-overlay h1 {
    font-size: 50px;
  }

  .home-intro {
    grid-template-columns: 1fr;
    padding: 80px 0;
  }

  .home-intro > p:last-child {
    grid-column: 1;
  }

  .editorial-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .editorial-tile > div {
    grid-template-columns: 1fr;
  }

  .brand-banner {
    min-height: 280px;
  }

  .collection-header h1 {
    font-size: 42px;
  }

  .collection-header {
    min-height: 260px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
    gap: 28px;
  }

  .collection-controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
  }

  .collection-controls-search {
    grid-template-columns: 1fr 1fr;
  }

  .collection-controls-search label:first-child {
    grid-column: 1 / -1;
  }

  .collection-controls input,
  .collection-controls select {
    width: 100%;
  }

  .content-page-header {
    padding-top: 64px;
    padding-bottom: 48px;
  }

  .content-page-header h1 {
    font-size: 42px;
  }

  .content-page-sections {
    grid-template-columns: 1fr;
    gap: 42px;
    min-height: 360px;
    padding-top: 42px;
    padding-bottom: 92px;
  }

  .content-page-sections--document {
    gap: 32px;
  }

  .content-page-table th {
    width: 38%;
    padding-right: 12px;
  }

  .cart-page-header {
    padding: 32px 16px 16px;
  }

  .cart-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
    padding: 0 16px 80px;
  }

  .cart-item {
    grid-template-columns: 20px 72px minmax(0, 1fr);
    grid-template-areas:
      "select media copy"
      ". media actions";
    gap: 12px;
  }

  .cart-item-select {
    grid-area: select;
  }

  .cart-item-media {
    grid-area: media;
  }

  .cart-item-copy {
    grid-area: copy;
  }

  .cart-item-actions {
    grid-area: actions;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .cart-summary {
    position: static;
  }

  .checkout-header {
    min-height: 170px;
    padding: 48px 16px 26px;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    width: 100%;
    padding: 28px 16px 92px;
  }

  .checkout-section {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .checkout-field-grid {
    grid-template-columns: 1fr;
  }

  .checkout-field-wide {
    grid-column: auto;
  }

  .checkout-address-card {
    padding: 14px;
  }

  .checkout-summary {
    position: static;
    padding: 20px;
  }

  .checkout-connection-note,
  .checkout-form-error {
    width: calc(100% - 32px);
  }

  .checkout-ready h1 {
    font-size: 38px;
  }

  .checkout-payment {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0;
    padding-top: 72px;
    padding-bottom: 96px;
  }

  .checkout-payment-copy h1 {
    font-size: 38px;
  }

  .checkout-payment-summary {
    margin-top: 52px;
  }

  .checkout-payment-notice,
  .checkout-payment-button,
  .checkout-payment-status,
  .checkout-payment > .text-link {
    grid-column: 1;
  }

  .account-auth-shell {
    min-height: 600px;
    padding-top: 64px;
    padding-bottom: 88px;
  }

  .account-auth-page {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .account-auth-panel {
    width: 100%;
    padding: 56px 16px 88px;
  }

  .account-auth-panel h2 {
    font-size: 34px;
  }

  .account-login-page .account-auth-panel h1 {
    font-size: 34px;
  }

  .account-auth-mark {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
  }

  .account-auth-field-pair {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .account-auth-form-tools {
    align-items: flex-end;
  }

  .account-auth-shell h1 {
    font-size: 38px;
    line-height: 1.05;
  }

  .account-header {
    min-height: 180px;
    padding: 48px 16px 26px;
  }

  .account-layout,
  .account-dashboard {
    grid-template-columns: 1fr;
    gap: 56px;
    width: 100%;
    padding: 32px 16px 92px;
  }

  .account-main {
    gap: 56px;
  }

  .account-order-row {
    grid-template-columns: 66px minmax(0, 1fr) 16px;
    gap: 14px;
  }

  .account-order-status {
    grid-column: 2;
    grid-row: 2;
    justify-items: start;
  }

  .account-row-arrow {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .account-address-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-field-grid,
  .account-order-detail-grid {
    grid-template-columns: 1fr;
  }

  .account-field-wide {
    grid-column: auto;
  }

  .account-order-detail-grid {
    gap: 52px;
  }

  .account-order-item {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .account-order-item > strong {
    grid-column: 2;
  }

.recent-rail {
    display: none;
  }

.floating-actions {
    right: 16px;
    bottom: 16px;
  }

:root {
    --header-height: 64px;
    --mobile-content-gutter: 8px;
    --mobile-fluid-gap: clamp(6px, 2vw, 10px);
    --mobile-header-gap: clamp(8px, 2.8vw, 12px);
    --mobile-header-gutter: clamp(8px, 3vw, 16px);
  }

  .content-width {
    width: 100%;
    max-width: var(--content-width);
    padding-inline: var(--mobile-content-gutter);
  }

  .account-overview-shell.content-width.is-menu-view {
    width: 100%;
    margin-inline: 0;
    padding: 28px 0 0;
  }

  .account-overview-shell.content-width.is-section-view {
    width: 100%;
    margin-inline: 0;
    padding: 28px var(--mobile-content-gutter) 88px;
  }

  .account-overview-shell.is-menu-view .account-overview-heading {
    min-height: 0;
    margin-bottom: 24px;
    padding-inline: 16px;
  }

  .account-overview-shell.is-menu-view .account-overview-heading h1 {
    overflow: hidden;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-overview-shell.is-menu-view .account-overview-heading p {
    margin-top: 6px;
    font-size: 12px;
  }

  .account-overview-shell.is-menu-view .account-dashboard-row {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 0;
    background: transparent;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 12;
  }

  .header-row {
    grid-template-columns: 40px 40px minmax(0, 1fr) 54px;
    grid-template-areas: "category menu brand utility";
    gap: var(--mobile-header-gap);
    padding-inline: var(--mobile-header-gutter);
  }

  .menu-button {
    grid-area: menu;
  }

  .account-mobile-back {
    grid-column: 1 / 3;
    grid-row: 1;
    justify-self: start;
  }

  .brand-link {
    grid-area: brand;
    width: clamp(130px, 38vw, 164px);
    justify-self: start;
  }

  .primary-nav {
    position: fixed;
    z-index: 16;
    inset: 64px 0 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 18px;
    background: var(--paper);
    font-family: var(--font-sans);
    font-size: 28px;
    white-space: normal;
    transform: none;
  }

  .utility-nav a {
    display: none;
  }

  .utility-nav a.utility-cart-link {
    display: inline-flex;
  }

  /* App-bar chrome (logo + 검색/장바구니 header + GNB strip): every
     storefront page except the focused checkout/auth flows, which keep
     distractions out. */
  body.page-home .category-drawer-trigger,
  body.page-products .category-drawer-trigger,
  body.page-product-detail .category-drawer-trigger,
  body.page-cart .category-drawer-trigger,
  body.page-account .category-drawer-trigger,
  body.page-account-address .category-drawer-trigger,
  body.page-account-order .category-drawer-trigger,
  body.page-account-return .category-drawer-trigger,
  body.page-recent .category-drawer-trigger,
  body.page-content .category-drawer-trigger {
    display: none;
  }

  body.page-home .menu-button,
  body.page-products .menu-button,
  body.page-product-detail .menu-button,
  body.page-cart .menu-button,
  body.page-account .menu-button,
  body.page-account-address .menu-button,
  body.page-account-order .menu-button,
  body.page-account-return .menu-button,
  body.page-recent .menu-button,
  body.page-content .menu-button {
    display: none !important;
  }

  /* App bar keeps only 검색/장바구니 here (찜/마이페이지 moved to the
     bottom tab bar) — matches zigzag.kr's mobile app-bar + bottom-nav
     split. */
  body.page-home .utility-nav a.utility-search-link,
  body.page-products .utility-nav a.utility-search-link,
  body.page-product-detail .utility-nav a.utility-search-link,
  body.page-cart .utility-nav a.utility-search-link,
  body.page-account .utility-nav a.utility-search-link,
  body.page-account-address .utility-nav a.utility-search-link,
  body.page-account-order .utility-nav a.utility-search-link,
  body.page-account-return .utility-nav a.utility-search-link,
  body.page-recent .utility-nav a.utility-search-link,
  body.page-content .utility-nav a.utility-search-link {
    display: inline-flex;
  }

  body.page-home .header-row,
  body.page-products .header-row,
  body.page-product-detail .header-row,
  body.page-cart .header-row,
  body.page-account .header-row,
  body.page-account-address .header-row,
  body.page-account-order .header-row,
  body.page-account-return .header-row,
  body.page-recent .header-row,
  body.page-content .header-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand utility";
  }

  body .header-row.has-mobile-back {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "back utility";
  }

  .header-row.has-mobile-back .account-mobile-back {
    grid-area: back;
    grid-column: auto;
    grid-row: auto;
  }

  .header-row.has-mobile-back .category-drawer-trigger,
  .header-row.has-mobile-back .menu-button {
    display: none !important;
  }

  .header-row.has-mobile-back .utility-nav a.utility-search-link,
  .header-row.has-mobile-back .utility-nav a.utility-cart-link {
    display: inline-flex;
  }

  body.page-home .gnb-strip {
    position: sticky;
    top: 64px;
    z-index: 11;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 14px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .gnb-strip a {
    flex-shrink: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Bottom tab bar: same set, minus product detail (its own purchase bar
     already occupies the bottom edge there). */
  body.page-home,
  body.page-products,
  body.page-new-arrivals,
  body.page-cart,
  body.page-account,
  body.page-account-address,
  body.page-account-order,
  body.page-account-return,
  body.page-recent,
  body.page-content {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  body.page-home .bottom-nav,
  body.page-products .bottom-nav,
  body.page-new-arrivals .bottom-nav,
  body.page-cart .bottom-nav,
  body.page-account .bottom-nav,
  body.page-account-address .bottom-nav,
  body.page-account-order .bottom-nav,
  body.page-account-return .bottom-nav,
  body.page-recent .bottom-nav,
  body.page-content .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 13;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: var(--paper);
  }

  body.page-home .floating-actions,
  body.page-products .floating-actions,
  body.page-new-arrivals .floating-actions,
  body.page-cart .floating-actions,
  body.page-account .floating-actions,
  body.page-account-address .floating-actions,
  body.page-account-order .floating-actions,
  body.page-account-return .floating-actions,
  body.page-recent .floating-actions,
  body.page-content .floating-actions {
    bottom: calc(60px + 16px + env(safe-area-inset-bottom));
  }

  .recent-history {
    padding-top: 36px;
    padding-bottom: 80px;
  }

  .recent-history-heading {
    margin-bottom: 24px;
  }

  .recent-history-heading h1 {
    font-size: 32px;
  }

  .home-hero-carousel {
    margin-top: 18px;
    padding: 0;
  }

  .home-hero-track {
    overflow: visible;
  }

  .home-hero-track > .swiper-wrapper > .home-hero {
    width: 88%;
    transform: scale(0.93);
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  .home-hero-track > .swiper-wrapper > .home-hero.is-hero-current {
    transform: scale(0.98486);
  }

  .home-hero {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    display: block;
    padding: 0;
  }

  .home-hero-media {
    position: static;
    inset: auto;
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .home-hero-media img {
    aspect-ratio: 4 / 5;
    height: auto;
  }

  .home-hero-controls {
    right: 24px;
    bottom: 16px;
  }

  .home-hero-controls .home-hero-toggle {
    display: none;
  }

  .category-shortcuts {
    padding: 24px 0 4px;
  }

  .category-shortcuts-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 20px 8px;
  }

  .category-shortcut-item {
    width: auto;
  }

  .category-shortcut-thumb {
    width: 56px;
    height: 56px;
  }

  .category-shortcut-label {
    font-size: 12px;
  }

  .product-section {
    padding: 64px 0 48px;
  }

  .section-heading h2 {
    font-size: 22px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mobile-fluid-gap);
    row-gap: 34px;
  }

  .product-info {
    font-size: 12px;
  }

  .collection-page {
    padding-top: 24px;
    padding-bottom: 80px;
  }

  .collection-page.content-width {
    padding-inline: 0;
  }

  .collection-page-heading-content,
  .collection-page-body {
    padding-inline: var(--mobile-content-gutter);
  }

  .products-header h1 {
    font-size: 32px;
  }

  .category-tabs {
    justify-content: flex-start;
    margin-top: 20px;
  }

  .filter-panel {
    width: calc(100vw - 48px);
  }

  .product-detail {
    width: 100%;
    display: block;
    padding-inline: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .product-gallery {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .product-media-main {
    order: 1;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-media-main::-webkit-scrollbar {
    display: none;
  }

  .product-media-main figure {
    flex: 0 0 100%;
    display: block;
    aspect-ratio: 4 / 5;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .product-thumbnails {
    display: none;
  }

  .product-media-count {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 3px;
    margin: 0;
    padding: 5px 9px;
    color: var(--paper);
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.68);
    font-size: 11px;
    line-height: 1;
  }

  .product-purchase {
    position: static;
    padding: 28px var(--mobile-content-gutter) 0;
  }

  .product-purchase-top {
    display: none;
  }

  .product-purchase h1 {
    font-size: clamp(18px, 5vw, 20px);
    line-height: 1.4;
  }

  .product-subtitle {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
  }

  .product-price-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
  }

  .product-detail-price-block {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .product-detail-price-block .product-price-row {
    display: flex;
    gap: 7px;
    font-size: 18px;
  }

  .product-consumer-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
  }

  .product-title-actions {
    position: relative;
    top: auto;
    right: auto;
    gap: 4px;
  }

  .product-title-actions .icon-button {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  .product-shipping-row {
    margin-top: 22px;
  }

  body.page-product-detail {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }

  .product-purchase-bottom {
    margin-top: 0;
    padding-top: 0;
  }

  body.page-product-detail .product-cta-row {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 18;
    gap: 0;
    padding: 0;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 24px rgba(17, 17, 17, 0.1);
  }

  body.page-product-detail .product-cta-row .add-to-bag,
  body.page-product-detail .product-cta-row .buy-now {
    min-height: calc(54px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 15px;
    font-weight: 600;
  }

  body.page-product-detail .product-cta-row .add-to-bag {
    color: var(--paper);
    border-color: var(--ink);
    background: var(--ink);
  }

  body.page-product-detail .product-cta-row .buy-now {
    color: var(--paper);
    border-color: var(--cobalt);
    background: var(--cobalt);
  }

  body.page-product-detail .floating-actions {
    bottom: calc(70px + env(safe-area-inset-bottom));
  }

  .variant-picker {
    margin: 0 0 20px;
  }

  .variant-dropdown {
    margin: 0;
  }

  .variant-picker > div:last-child {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-option-sheet-backdrop {
    position: fixed;
    z-index: 16;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    border: 0;
    visibility: hidden;
    opacity: 0;
    background: rgba(17, 17, 17, 0.42);
    transition: opacity 180ms ease, visibility 180ms ease;
  }

  body.product-option-sheet-open .product-option-sheet-backdrop {
    visibility: visible;
    opacity: 1;
  }

  .product-option-sheet {
    position: fixed;
    z-index: 17;
    left: 0;
    right: 0;
    bottom: calc(54px + env(safe-area-inset-bottom));
    height: auto;
    max-height: 60dvh;
    flex: none;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    background: var(--paper);
    box-shadow: 0 -10px 30px rgba(17, 17, 17, 0.14);
    transform: translateY(100%);
    transition: transform 220ms ease, visibility 220ms ease;
  }

  .product-option-sheet.is-open {
    visibility: visible;
    transform: translateY(0);
  }

  .product-option-sheet-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--mobile-content-gutter);
    border-bottom: 1px solid var(--line);
  }

  .product-option-sheet-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }

  .product-option-sheet-header button {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 10px;
    border: 0;
    background: transparent;
  }

  .product-option-sheet-header img {
    width: 20px;
    height: 20px;
  }

  .product-option-sheet-body {
    overflow-y: auto;
    padding: 16px var(--mobile-content-gutter) 12px;
  }

  .product-option-sheet-body > .product-quantity-picker {
    margin-top: 0;
  }

  .product-option-sheet-body .option-lines {
    max-height: 31dvh;
    gap: 8px;
    margin-top: 8px;
    overflow-y: auto;
  }

  .product-option-sheet-body .option-line {
    padding: 10px 12px;
    background: rgba(17, 17, 17, 0.025);
  }

  .product-option-sheet-body .option-line-top {
    min-height: 24px;
    margin-bottom: 6px;
  }

  .product-option-sheet-body .option-line-name {
    font-size: 12px;
    font-weight: 500;
  }

  .product-option-sheet-body .option-line-remove {
    width: 28px;
    height: 28px;
    margin: -4px -6px -4px 0;
    font-size: 14px;
  }

  .product-option-sheet-body .option-line-bottom {
    gap: 8px;
  }

  .product-option-sheet-body .option-line .quantity-stepper .quantity-step {
    width: 32px;
    font-size: 14px;
  }

  .product-option-sheet-body .option-line .quantity-stepper input[type="number"] {
    width: 40px;
    min-height: 34px;
    font-size: 12px;
  }

  .product-option-sheet-body .option-line .option-line-price {
    font-size: 12px;
  }

  .product-option-sheet > .option-total {
    flex-shrink: 0;
    padding: 14px var(--mobile-content-gutter);
    background: var(--paper);
  }

  .product-option-sheet > .option-total-single {
    display: flex;
  }

  .product-option-sheet > .option-total .option-total-label,
  .product-option-sheet-body .single-option-inline-price {
    display: none;
  }

  .product-option-sheet > .option-total .option-total-count {
    display: inline;
  }

  .product-policy {
    padding-top: 24px;
  }

  .product-policy-notice {
    margin-bottom: 12px;
    border: 1px solid var(--line);
    text-align: left;
  }

  .product-policy-notice > summary.section-heading {
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0 20px;
    cursor: pointer;
    background: rgba(17, 17, 17, 0.04);
    text-align: left;
  }

  .product-policy-notice > summary h2 {
    font-size: 13px;
  }

  .product-policy-toggle-icon {
    width: 16px;
    height: 16px;
    display: block;
    transition: transform 180ms ease;
  }

  .product-policy-notice[open] .product-policy-toggle-icon {
    transform: rotate(180deg);
  }

  .product-policy-notice > .product-notice-table {
    margin: 0;
  }

  .product-detail-tabs {
    padding-inline: 0;
    padding-top: 0;
  }

  .product-tabs-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow-x: visible;
  }

  .product-tab {
    width: 100%;
    padding: 16px 4px;
    text-align: center;
  }

  .product-tab-panel {
    padding-inline: var(--mobile-content-gutter);
  }

  .related-products {
    padding-bottom: 60px;
  }

  .site-footer {
    padding-inline: var(--mobile-content-gutter);
  }

  .footer-business {
    grid-template-columns: 1fr;
    grid-template-areas:
      "company"
      "policy"
      "copyright";
    gap: 12px;
    padding: 20px 0 28px;
  }

  .footer-policy {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 10px;
    white-space: normal;
  }

  .footer-company-info {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .category-drawer {
    width: 100vw;
    border-right: 0;
  }
}