/* mobile-filter-sheet:start */
.mobile-filter-backdrop,
.mobile-filter-close {
  display: none;
}

@media (max-width: 980px) {
  body.is-mobile-filter-open {
    overflow: hidden;
  }

  .mobile-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 62;
    display: block;
    border: 0;
    background: rgba(15, 23, 42, .28);
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .22s ease;
  }

  body.is-mobile-filter-open .mobile-filter-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-filter-close {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #64748b;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
  }

  .control-panel {
    position: fixed !important;
    z-index: 63;
    top: auto;
    right: 8px;
    bottom: 0;
    left: 8px;
    max-height: min(86dvh, 760px);
    padding: 16px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: auto;
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 28px));
    transition: transform .28s cubic-bezier(.22, .72, .2, 1), opacity .2s ease;
    overscroll-behavior: contain;
  }

  body.is-mobile-filter-open .control-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .control-panel .panel-head {
    padding-right: 42px;
  }

  .bottom-nav [data-mobile-filter-open][aria-expanded="true"] {
    border-color: rgba(37, 99, 235, .34);
    background: rgba(239, 246, 255, .92);
    color: var(--blue);
  }
}
/* mobile-filter-sheet:end */

/* bottom-page-flow-nav:start */
.bottom-nav {
  width: min(460px, calc(100vw - 24px));
  min-height: 56px;
  gap: 4px;
  padding: 6px;
  border-color: #dbe3ef;
  background: #fff !important;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

.bottom-nav a,
.bottom-nav button {
  min-height: 42px;
  flex-direction: row;
  gap: 6px;
  padding: 0 12px;
  background: transparent !important;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

.bottom-nav .is-current {
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  box-shadow: none;
}

.bottom-nav .is-3q-bottom {
  flex: 1.34 1 0;
  border-color: rgba(37, 99, 235, .22) !important;
  background: linear-gradient(180deg, #4f7cff, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(37, 99, 235, .2);
}

.bottom-nav .is-filter-link {
  display: none;
}

@media (max-width: 980px) {
  .bottom-nav {
    width: min(500px, calc(100vw - 16px));
  }

  .bottom-nav a,
  .bottom-nav button {
    min-height: 46px;
    flex-direction: column;
    gap: 3px;
    padding: 0 7px;
    font-size: 10px;
  }

  .bottom-nav .is-filter-link {
    flex: 1.24 1 0;
    display: inline-flex;
    border-color: rgba(59, 130, 246, .42) !important;
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 10px 20px rgba(37, 99, 235, .20);
  }

  .bottom-nav .is-filter-link:hover {
    background: #1d4ed8 !important;
    color: #fff !important;
  }

  .bottom-nav .is-current {
    flex: 1 1 0;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
  }

  .bottom-nav .is-3q-bottom {
    flex: 1.38 1 0;
    color: #fff !important;
    background: linear-gradient(180deg, #4f7cff, #2563eb) !important;
  }
}
/* bottom-page-flow-nav:end */

@media (max-width: 980px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }

  .result-head > .need-answer-card .need-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .controls-bar {
    min-height: auto;
    padding: 10px 10px 2px;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .page-flow-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .page-flow-links {
    width: auto;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .page-flow-links::-webkit-scrollbar {
    display: none;
  }

  .page-flow-link {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 11px;
  }

  .page-flow-link small {
    display: none;
  }

  .pill-button {
    margin-right: 0;
  }

  .pill-button,
  .count-pill,
  .saved-pill,
  .comment-pill {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }

  .comment-pill {
    margin-left: 0;
  }

  .ranking-comment-drawer {
    padding: 10px;
  }

  .ranking-comment-panel {
    max-height: min(720px, calc(100vh - 20px));
    padding: 12px 16px 16px;
    border-radius: 18px;
  }

  .ranking-comment-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0 0 -44px auto;
    font-size: 24px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10), inset 0 1px 0 rgba(255, 255, 255, .8);
  }

  .ranking-comment-panel .guide-comment-call {
    top: 44px;
    margin-top: 12px;
    border-color: rgba(147, 197, 253, .72);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(239, 246, 255, .58));
    box-shadow:
      0 8px 24px rgba(15, 23, 42, .08),
      inset 0 1px 0 rgba(255, 255, 255, .9);
  }

  .ranking-comment-panel h2 {
    font-size: 18px;
  }

  .ranking-comment-copy {
    font-size: 12px;
    line-height: 1.55;
  }

  .comment-howto {
    padding: 8px;
    border-radius: 14px;
  }

  .comment-howto ol {
    gap: 6px;
  }

  .comment-howto li {
    min-height: 70px;
    padding: 8px 6px;
  }

  .comment-howto li:not(:last-child)::after {
    right: -6px;
    width: 6px;
  }

  .comment-howto b {
    font-size: 10.5px;
    line-height: 1.28;
  }

  .comment-howto-copy {
    font-size: 10.5px;
    line-height: 1.4;
  }

	  .comment-howto small {
	    font-size: 9px;
	    width: min(100%, 76px);
	    line-height: 1.4;
	  }

	  .guide-comment-call {
	    grid-template-columns: auto minmax(0, 1fr);
	  }

	  .guide-comment-call-actions {
	    grid-column: 1 / -1;
	    width: 100%;
	    min-width: 0;
	    display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    justify-self: stretch;
	    justify-content: stretch;
	  }

	  .guide-comment-call-actions button {
	    min-width: 0;
	    min-height: 44px;
	  }

	  .app-shell {
    padding: 4px 10px 104px;
  }

  .tool-grid {
    margin-top: 8px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    border-radius: 18px;
  }

  .topbar nav {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .topbar nav a {
    flex: 0 0 auto;
  }

  .control-panel,
  .result-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .need-step-card {
    overflow: hidden;
  }

  .step-selected-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  .step-selected-tag {
    min-width: 0;
    padding: 0 5px;
    gap: 3px;
  }

  .step-selected-tag small {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 9px;
  }

  .step-selected-tag span {
    min-width: 0;
    overflow: visible;
    font-size: 9.5px;
    letter-spacing: 0;
    text-overflow: clip;
    white-space: nowrap;
  }

  .panel-head h1,
  .result-head h2 {
    font-size: 21px;
  }

  .panel-head h1 {
    font-size: 18px;
  }

  .result-head {
    flex-direction: column;
  }

  .sort-control {
    width: 100%;
  }

  .category-grid,
  .choice-grid {
    grid-template-columns: 1fr;
  }

  .step-selected-tags {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-grid {
    max-height: 360px;
  }

  .result-controls {
    width: 100%;
  }

  .bottom-nav {
    bottom: 10px;
    width: min(500px, calc(100vw - 16px));
  }

  .bottom-nav a,
  .bottom-nav button {
    font-size: 10px;
  }

  .page-top-button {
    right: 12px;
    bottom: 84px;
  }
}

/* stable-ranking-sticky:start */
.table-wrap {
  --rank-col-width: 88px;
  --product-col-width: 460px;
}

.table-wrap th:nth-child(1),
.table-wrap td:nth-child(1) {
  position: sticky !important;
  left: 0 !important;
  width: var(--rank-col-width) !important;
  min-width: var(--rank-col-width) !important;
  max-width: var(--rank-col-width) !important;
  border-right: 1px solid #d5dce7 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.table-wrap th:nth-child(2),
.table-wrap td:nth-child(2) {
  position: sticky !important;
  left: var(--rank-col-width) !important;
  width: var(--product-col-width) !important;
  min-width: var(--product-col-width) !important;
  max-width: var(--product-col-width) !important;
  border-right: 1px solid #d5dce7 !important;
  background: #fff !important;
  box-shadow: 13px 0 20px -18px rgba(15, 23, 42, .62) !important;
}

.table-wrap th:nth-child(1),
.table-wrap th:nth-child(2) {
  z-index: 12 !important;
  background: #f8fafc !important;
}

.table-wrap td:nth-child(1),
.table-wrap td:nth-child(2) {
  z-index: 7 !important;
}

.table-wrap tbody tr:hover td:nth-child(1),
.table-wrap tbody tr:hover td:nth-child(2) {
  background: #f8fafc !important;
}

.table-wrap tbody tr[data-review-row]:focus-visible td:nth-child(1) {
  box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .24) !important;
}

.table-wrap tbody tr[data-review-row]:focus-visible td:nth-child(2) {
  box-shadow:
    inset 0 0 0 2px rgba(37, 99, 235, .24),
    13px 0 20px -18px rgba(15, 23, 42, .62) !important;
}

@media (max-width: 640px) {
  .table-wrap {
    --rank-col-width: 68px;
    --product-col-width: clamp(196px, calc(100vw - 180px), 236px);
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .table-wrap table {
    min-width: 1140px;
  }

  .table-wrap th,
  .table-wrap td {
    padding: 9px 10px;
  }

  .table-wrap th:nth-child(1),
  .table-wrap td:nth-child(1) {
    padding-left: 7px;
    padding-right: 7px;
  }

  .table-wrap th:nth-child(3),
  .table-wrap td:nth-child(3) {
    width: 126px;
  }

  .table-wrap th:nth-child(4),
  .table-wrap td:nth-child(4) {
    width: 116px;
  }

  .table-wrap th:nth-child(5),
  .table-wrap td:nth-child(5) {
    width: 104px;
  }

  .table-wrap th:nth-child(6),
  .table-wrap td:nth-child(6) {
    width: 190px;
  }

  .table-wrap th:nth-child(7),
  .table-wrap td:nth-child(7) {
    width: 200px;
  }

  .table-wrap th:nth-child(8),
  .table-wrap td:nth-child(8) {
    width: 140px;
  }

  .table-wrap td:nth-child(1) {
    vertical-align: top;
  }

  .rank-badge {
    min-width: 28px;
    justify-content: center;
    font-size: 11px;
  }

  .rank-control {
    gap: 4px;
  }

  .rank-control .row-accordion-cue {
    width: 18px;
    height: 18px;
  }

  .rank-control .row-accordion-cue::after {
    width: 5px;
    height: 5px;
  }

  .product-cell {
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 8px;
    align-items: start;
  }

  .product-cell > div {
    display: contents;
  }

  .product-cell img,
  .image-fallback {
    grid-column: 1;
    grid-row: 1;
    width: 42px;
    height: 42px;
  }

  .product-cell b {
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
    font-size: 12px;
    line-height: 1.34;
    -webkit-line-clamp: 2;
  }

  .product-cell small {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    margin-top: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 10.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* stable-ranking-sticky:end */

/* row-accordion-affordance:final */
.table-wrap tbody tr[data-review-row].is-review-open td,
.table-wrap tbody tr[data-review-row].is-review-open td:nth-child(1),
.table-wrap tbody tr[data-review-row].is-review-open td:nth-child(2) {
  background: #f8fbff !important;
}

.table-wrap tbody tr[data-review-row].is-review-open td:nth-child(2) {
  box-shadow: 13px 0 20px -18px rgba(15, 23, 42, .62) !important;
}

/* table-load-more:sticky-reset */
.table-wrap tbody tr.table-load-row > td,
.table-wrap tbody tr.table-load-row:hover > td {
  position: static !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 14px !important;
  border-right: 0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  z-index: auto !important;
}

/* ranking-table-performance:start */
.table-wrap tbody td {
  background: #fff !important;
  box-shadow: none !important;
}

.table-wrap tbody tr:nth-child(even):not(.review-slide-row):not(.table-load-row) td {
  background: #fbfcfe !important;
}

.table-wrap tbody tr[data-review-row]:hover td,
.table-wrap tbody tr[data-review-row]:hover td:nth-child(1),
.table-wrap tbody tr[data-review-row]:hover td:nth-child(2) {
  background: #f8fbff !important;
  box-shadow: none !important;
}

.table-wrap th:nth-child(2),
.table-wrap td:nth-child(2) {
  box-shadow: 12px 0 18px -18px rgba(15, 23, 42, .34) !important;
}

.product-cell img {
  box-shadow: none;
}

.row-comment-count {
  background: #eff6ff;
  box-shadow: none;
}

.row-comment-count:hover {
  background: #dbeafe;
}

.table-wrap tbody tr[data-review-row].is-review-open td,
.table-wrap tbody tr[data-review-row].is-review-open td:nth-child(1),
.table-wrap tbody tr[data-review-row].is-review-open td:nth-child(2) {
  background: #f8fbff !important;
}

.table-wrap.is-drag-scrolling {
  cursor: grabbing;
  user-select: none;
}

.table-wrap.is-table-moving th:nth-child(2),
.table-wrap.is-table-moving td:nth-child(2),
.table-wrap.is-table-moving tbody tr[data-review-row].is-review-open td:nth-child(2) {
  box-shadow: none !important;
}

.table-wrap.is-table-moving tbody tr[data-review-row]:hover td,
.table-wrap.is-table-moving tbody tr[data-review-row]:hover td:nth-child(1),
.table-wrap.is-table-moving tbody tr[data-review-row]:hover td:nth-child(2) {
  background: #fff !important;
}

.table-wrap.is-table-moving tbody tr[data-review-row]:nth-child(even):hover td,
.table-wrap.is-table-moving tbody tr[data-review-row]:nth-child(even):hover td:nth-child(1),
.table-wrap.is-table-moving tbody tr[data-review-row]:nth-child(even):hover td:nth-child(2) {
  background: #fbfcfe !important;
}

.table-wrap.is-table-moving .review-slide,
.table-wrap.is-table-moving .product-cell img,
.table-wrap.is-table-moving .rating-stars,
.table-wrap.is-table-moving .row-accordion-cue {
  animation: none !important;
  transition: none !important;
}
/* ranking-table-performance:end */

/* mobile-ranking-card-view:start */
.mobile-ranking-cards {
  display: none;
}

@media (max-width: 640px) {
  .mobile-ranking-cards {
    display: grid;
    gap: 10px;
    margin-top: 0;
  }

  .mobile-ranking-cards.is-loading {
    gap: 10px;
  }

  .mobile-ranking-loader {
    min-height: 116px;
    border: 1px solid rgba(203, 213, 225, .78);
    border-radius: 12px;
    background:
      linear-gradient(110deg, rgba(255, 255, 255, .92), rgba(239, 246, 255, .54), rgba(240, 253, 250, .42), rgba(255, 255, 255, .92));
    background-size: 220% 100%;
    animation: awSharedLoaderWash 5.8s ease-in-out infinite;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .88),
      0 12px 26px rgba(15, 23, 42, .06);
  }

  .mobile-ranking-loader .ranking-loader-card {
    min-width: min(250px, 100%);
  }

  .mobile-rank-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(203, 213, 225, .92);
    border-radius: 16px;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .92), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 250, 252, .92));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .9),
      0 14px 30px rgba(15, 23, 42, .065);
  }

  .mobile-rank-card.is-loading-card {
    border-radius: 12px;
  }

  .mobile-rank-card.is-open {
    border-color: rgba(147, 197, 253, .92);
    background:
      radial-gradient(circle at 14% 0%, rgba(239, 246, 255, .96), transparent 42%),
      linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  }

  .mobile-rank-card.is-loading-card {
    gap: 12px;
    pointer-events: none;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-card-head {
    justify-content: space-between;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-card-head span:nth-child(1) {
    width: 36px;
    height: 28px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-card-head span:nth-child(2) {
    width: 74px;
    height: 28px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-card-head span:nth-child(3) {
    width: 76px;
    height: 28px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-product > span {
    width: 58px;
    height: 58px;
    border-radius: 10px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-product b {
    width: 100%;
    height: 15px;
    margin-top: 5px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-product small {
    width: 62%;
    height: 12px;
    margin-top: 9px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-summary section {
    min-height: 58px;
    border-color: transparent;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-points p {
    width: 100%;
    height: 14px;
  }

  .mobile-rank-card.is-loading-card .mobile-rank-points p:nth-child(2) {
    width: 72%;
  }

  .mobile-rank-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .mobile-rank-no {
    min-width: 36px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e1ee;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .mobile-rank-comment-count,
  .mobile-rank-detail {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #d8e1ee;
    border-radius: 999px;
    background: #fff;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-rank-comment-count {
    padding: 0 9px;
  }

  .mobile-rank-comment-count .comment-mini {
    width: 13px;
    height: 13px;
    background: currentColor;
  }

  .mobile-rank-detail {
    margin-left: auto;
    padding: 0 12px;
    color: #1d4ed8;
  }

  .mobile-rank-product {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .mobile-rank-product img,
  .mobile-rank-product .image-fallback {
    width: 58px;
    height: 58px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    object-fit: cover;
  }

  .mobile-rank-product b {
    display: -webkit-box;
    overflow: hidden;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .mobile-rank-product small {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-rank-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-rank-summary.is-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-rank-summary:not(.is-compare) section:nth-child(1) {
    order: 1;
  }

  .mobile-rank-summary:not(.is-compare) section:nth-child(2) {
    order: 3;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
  }

  .mobile-rank-summary:not(.is-compare) section:nth-child(3) {
    order: 2;
  }

  .mobile-rank-summary section,
  .mobile-rank-detail-panel section {
    min-width: 0;
    padding: 9px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
  }

  .mobile-rank-summary small,
  .mobile-rank-detail-panel small {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
  }

  .mobile-rank-summary strong,
  .mobile-rank-detail-panel strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-rank-summary:not(.is-compare) section:nth-child(2) small {
    margin-bottom: 0;
  }

  .mobile-rank-summary:not(.is-compare) section:nth-child(2) strong {
    justify-self: end;
  }

  .mobile-rank-summary .price-band {
    width: fit-content;
    max-width: max-content;
    margin-top: 3px;
    padding: 0 6px;
    border-radius: 12px;
    font-size: 9.5px;
    line-height: 18px;
  }

  .mobile-rating {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: visible !important;
  }

  .mobile-rating .rating-stars {
    flex: 0 0 auto;
    width: 76px;
    height: 14px;
  }

  .mobile-rating em,
  .mobile-rank-detail-panel em {
    color: #334155;
    font-style: normal;
    font-size: 12px;
  }

  .mobile-rank-points {
    display: grid;
    gap: 7px;
  }

  .mobile-rank-points p {
    margin: 0;
    color: #475569;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
  }

  .mobile-rank-points span {
    display: inline-flex;
    margin-right: 7px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 700;
  }

  .mobile-rank-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 2px;
  }

  .mobile-rank-actions .review-comment-button {
    width: 100%;
    min-height: 42px;
  }

  .mobile-rank-actions .link-pair {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-rank-actions .link-pair a {
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
  }

  .mobile-rank-actions .link-pair a span:not(.brand-mark):not(.brand-mark-pair) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

	  .mobile-rank-detail-panel {
	    display: grid;
	    grid-template-columns: repeat(2, minmax(0, 1fr));
	    gap: 8px;
	    padding-top: 2px;
	  }

  .mobile-rank-detail-panel section.is-wide {
    grid-column: 1 / -1;
  }

  .mobile-rank-detail-panel p {
    margin: 0;
    color: #475569;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.55;
  }

  .mobile-ranking-load {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d8e1ee;
    border-radius: 16px;
    background: #fff;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-ranking-load button {
    min-height: 36px;
    padding: 0 16px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font: inherit;
    cursor: pointer;
  }

  .mobile-ranking-empty {
    padding: 18px 14px;
    border: 1px solid #d8e1ee;
    border-radius: 16px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
  }

  .result-card .table-wrap {
    display: none;
  }

  body.is-table-fullscreen .mobile-ranking-cards {
    display: none !important;
  }

  body.is-table-fullscreen .result-card .table-wrap {
    display: block;
  }
}
/* mobile-ranking-card-view:end */