@media (max-width: 768px) {
  .comparison-wrap[data-module="Comparison"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    margin: 0 auto 20px;
    padding-top: 0;
    --comparison-table-width: 100%;
  }

  .comparison-wrap[data-module="Comparison"] .comparison {
    width: 100%;
  }

  /* header row: back link stays full-width on top, cards get their own independent swipeable strip below it */
  .comparison-wrap[data-module="Comparison"] .comparison-grid-header {
    display: block;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-grid-header > .comparison-grid-col:first-child {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 16px 16px 8px;
    border-right: 0;
    border-top: 0;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-grid-header > .comparison-grid-col:first-child > a.link {
    margin-top: 0;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-cards-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 4px 16px 16px;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-cards-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-cards-scroll > .comparison-grid-col {
    flex: 0 0 var(--comparison-card-width, 82%);
    width: var(--comparison-card-width, 82%);
    max-width: var(--comparison-card-width, 82%);
    scroll-snap-align: start;
    border: 0;
    padding: 0;
  }

  /* card variant with a fixed intrinsic width (marked with the extra .comparison-card class, e.g. the
     tariff cards, as opposed to the flexible max-width device cards above): forcing a percentage slot
     onto a fixed-width card either clips it or leaves a gap depending on viewport, and that gap/clip
     ratio changes with however many cards happen to be in the comparison (2 or 3). Sizing the slide to
     its own content sidesteps that entirely - no width assumption tied to a specific card count. */
  .comparison-wrap[data-module="Comparison"] .comparison-cards-scroll > .comparison-grid-col.comparison-card {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: calc(100vw - 64px) !important;
  }

  /* "Sadece Farkları Göster" checkbox: relocated by comparison-responsive.js to sit below the card strip */
  .comparison-wrap[data-module="Comparison"] .comparison-checkbox-mobile {
    padding: 0 16px 16px;
    border-bottom: 1px solid var(--tt-color-surface-opaque);
  }

  .comparison-wrap[data-module="Comparison"] .comparison-checkbox-mobile .checkbox-wrap {
    margin-top: 0;
  }

  /* spec table: one independently horizontally-scrollable block with its own fixed width — not linked
     to the card strip in any way. comparison-responsive.js sets --comparison-table-width based on how
     many devices are being compared, and every row (section titles included) is stretched to that width
     so the whole table scrolls together as a single, consistently wide unit. */
  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll .comparison-grid {
    display: flex;
    width: var(--comparison-table-width);
    min-width: 100%;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll .comparison-grid-content > .comparison-grid-col {
    flex: 0 0 var(--comparison-value-col-width, 140px);
    width: var(--comparison-value-col-width, 140px);
    max-width: var(--comparison-value-col-width, 140px);
    border-right: 1px solid var(--tt-color-surface-opaque);
  }

  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll .comparison-grid-content > .comparison-grid-col:first-child {
    flex: 0 0 var(--comparison-label-col-width, 150px);
    width: var(--comparison-label-col-width, 150px);
    max-width: var(--comparison-label-col-width, 150px);
  }

  /* the site's own .list/li CSS divides each column's height equally among its <li> rows and hides the
     overflow — fine at the wide desktop column widths it was designed for, but at our narrower mobile
     column widths, text that wraps to more lines than that forced equal split gets silently clipped.
     Let each row size to its own content instead. */
  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll .list {
    height: auto;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-table-scroll .list li {
    height: auto;
    overflow: visible;
  }

  .comparison-wrap[data-module="Comparison"] .comparison-add,
  .comparison-wrap[data-module="Comparison"] .comparison-none {
    width: 100%;
  }
}