html,
    body {
      width: 100%;
      /* overflow-x: hidden; removed to fix mobile layout & sticky failures */
    }

    .weather-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      padding-bottom: 0;
      width: 100%;
      box-sizing: border-box;
    }

    .weather-toolbar .weather-heading-refresh,
    .weather-toolbar .weather-updated {
      transition: opacity 0.24s ease;
    }

    .weather-toolbar--delayed .weather-heading-refresh,
    .weather-toolbar--delayed .weather-updated {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .weather-toolbar .weather-heading-refresh,
    .weather-toolbar .weather-updated {
      visibility: visible;
    }

    /* Fix sticky positioning on weather page - ensure body is not a scroll container */
    html,
    body {
      overflow: visible !important;
      height: auto !important;
    }

    body {
      min-height: 100dvh;
      min-height: 100vh;
      /* fallback */
    }

    /* City filter chips */
    /* Legacy .weather-city-chips styles removed - replaced by shared .wa-pill-bar */

    .weather-heading-refresh {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      min-height: 36px;
      padding: var(--space-1) var(--space-4);
      border-color: color-mix(in oklab, var(--accent-weather) 50%, transparent);
      color: var(--accent-weather);
    }

    .weather-heading-refresh:hover,
    .weather-heading-refresh:focus-visible {
      border-color: color-mix(in oklab, var(--accent-weather) 70%, transparent);
      color: color-mix(in oklab, var(--accent-weather) 80%, var(--text) 20%);
    }

    #weather-tool-card .tool-card__face--front {
      overflow: visible;
    }

    .tool-card__face--front {
      max-width: 100%;
      width: 100%;
      align-self: center;
    }

    .weather-updated {
      font-variant-numeric: tabular-nums;
    }

    .weather-refresh__icon {
      display: block;
    }

    .weather-status {
      display: none;
      justify-content: center;
      align-items: center;
    }

    .weather-status[hidden] {
      display: none !important;
    }

    .weather-status__card {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-4);
      border-radius: var(--radius-lg);
      border: 1px dashed color-mix(in oklab, var(--border) 60%, transparent);
      background: color-mix(in oklab, var(--surface-2) 92%, transparent);
    }

    .weather-status__icon {
      font-size: clamp(36px, 6vw, 44px);
    }

    .weather-status__copy h3 {
      margin: 0 0 var(--space-1);
      font-size: var(--size-18);
    }

    .weather-status__copy p {
      margin: 0 0 var(--space-3);
      max-width: 360px;
    }

    .weather-city-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .weather-city {
      border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
      border-radius: var(--radius-lg);
      background: color-mix(in oklab, var(--surface-2) 90%, transparent);
      padding: var(--space-4) var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      position: relative;
      scroll-margin-top: 220px;
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    :root {
      --weather-icon-sun: #FACC15;
      --weather-icon-cloud: color-mix(in oklab, var(--text) 18%, transparent);
      --weather-icon-precip: #38BDF8;
      --weather-icon-snow: #E0F2FE;
      --weather-icon-ice: #C4B5FD;
      --weather-icon-fog: color-mix(in oklab, var(--text-muted) 78%, transparent);
      --weather-icon-bolt: #F97316;
    }

    html[data-theme="dark"] {
      --weather-icon-cloud: color-mix(in oklab, var(--text) 26%, transparent);
      --weather-icon-fog: color-mix(in oklab, var(--text-muted) 66%, transparent);
      --weather-icon-ice: color-mix(in oklab, #C4B5FD 88%, transparent);
      --weather-icon-snow: color-mix(in oklab, #E0F2FE 92%, transparent);
    }

    .weather-icon__sun {
      stroke: var(--weather-icon-sun);
    }

    .weather-icon__cloud {
      stroke: var(--weather-icon-cloud);
    }

    .weather-icon__precip {
      stroke: var(--weather-icon-precip);
    }

    .weather-icon__snow {
      stroke: var(--weather-icon-snow);
    }

    .weather-icon__ice {
      stroke: var(--weather-icon-ice);
    }

    .weather-icon__fog {
      stroke: var(--weather-icon-fog);
    }

    .weather-icon__bolt {
      stroke: var(--weather-icon-bolt);
    }

    .weather-city--loading {
      min-height: 160px;
      justify-content: center;
    }

    /* Header - Match timezone tool */
    .weather-city__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    .weather-city__title {
      display: inline-flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--space-2);
      row-gap: var(--space-2);
      flex: 1;
      min-width: 0;
    }

    .weather-city .tz-city-name {
      font-size: calc(var(--size-20) * 1.5);
      font-weight: var(--weight-semibold);
      line-height: 1;
    }

    .weather-city__header-aside {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .weather-city__header-meta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
      justify-content: flex-end;
      font-size: var(--size-13);
      color: var(--text-muted);
    }

    .weather-live-badge {
      background: var(--accent-weather);
      color: #fff;
      align-self: baseline;
      letter-spacing: 0.05em;
    }

    /* Location icon badge (replaces "YOUR LOCATION" text on main panel) */
    .tz-location-badge {
      color: var(--text-muted);
      margin-left: var(--space-1);
      flex-shrink: 0;
    }

    .tz-location-badge .location-icon {
      width: 14px;
      height: 14px;
      display: block;
    }

    .weather-offline-badge {
      display: inline-flex;
      align-items: center;
      padding: var(--space-0_5) var(--space-2);
      border-radius: var(--radius-pill);
      font-size: var(--size-11);
      font-weight: var(--weight-medium);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: var(--surface-hover);
      color: var(--text);
    }

    .weather-current-time {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-variant-numeric: tabular-nums;
    }

    .weather-current-time__icon {
      display: inline-flex;
      align-items: center;
      opacity: 0.7;
    }

    .weather-current-time__icon svg {
      display: block;
    }

    .weather-alert-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--radius-pill);
      border: 1px solid color-mix(in oklab, var(--accent-weather) 50%, transparent);
      color: var(--accent-weather);
      background: color-mix(in oklab, var(--accent-weather) 14%, transparent);
    }

    .weather-alert-btn:hover,
    .weather-alert-btn:focus-visible {
      border-color: color-mix(in oklab, var(--accent-weather) 70%, transparent);
      color: color-mix(in oklab, var(--accent-weather) 85%, var(--text) 15%);
    }

    /* Body */
    .weather-city__body {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
      align-items: start;
      padding-top: var(--space-2);
      min-width: 0;
    }

    @media (min-width: 960px) {
      .weather-metrics {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
      }

      .weather-city__body {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.2fr);
      }
    }

    /* Current conditions */
    .weather-current {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
    }

    .weather-current__overview {
      display: flex;
      align-items: flex-start;
      gap: var(--space-4);
    }

    .weather-condition__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: clamp(56px, 8vw, 72px);
      height: clamp(56px, 8vw, 72px);
      flex-shrink: 0;
      color: var(--text);
    }

    .weather-condition__icon svg {
      width: 100%;
      height: 100%;
    }

    .weather-condition__details {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      flex: 1;
    }

    .weather-temp-group {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
    }

    .weather-temp-primary {
      font-size: clamp(40px, 6vw, 48px);
      font-weight: var(--weight-semibold);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .weather-temp-secondary {
      font-size: var(--size-20);
      color: var(--text-muted);
      line-height: 1;
    }

    .weather-condition__label {
      font-size: var(--size-16);
      color: var(--text-muted);
    }

    .weather-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
      gap: var(--space-4);
      margin-top: var(--space-4);
    }

    @media (max-width: 640px) {
      .weather-metrics {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
          "feels humidity"
          "high low"
          "sunrise sunset";
      }

      .weather-metric--feels-like {
        grid-area: feels;
      }

      .weather-metric--humidity {
        grid-area: humidity;
      }

      .weather-metric--high {
        grid-area: high;
      }

      .weather-metric--low {
        grid-area: low;
      }

      .weather-metric--sunrise {
        grid-area: sunrise;
      }

      .weather-metric--sunset {
        grid-area: sunset;
      }
    }

    .weather-metric {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .weather-metric__label {
      font-size: var(--size-12);
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .weather-metric__value {
      display: inline-flex;
      align-items: baseline;
      gap: var(--space-2);
      font-variant-numeric: tabular-nums;
      color: var(--text);
    }

    .weather-metric__primary {
      font-size: var(--size-20);
      font-weight: var(--weight-medium);
    }

    .weather-metric__primary--time {
      font-size: var(--size-16);
      font-weight: var(--weight-medium);
    }

    .weather-metric__secondary {
      font-size: var(--size-14);
      color: var(--text-muted);
    }

    /* Forecast */
    .weather-forecast {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .weather-forecast__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-3);
      padding-top: var(--space-2);
    }

    .weather-forecast__title {
      font-size: var(--size-12);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      font-weight: var(--weight-medium);
    }

    .weather-forecast__tabs {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
    }

    .weather-forecast__tab {
      position: relative;
      padding: 0;
      border: 0;
      background: transparent;
      font-size: var(--size-14);
      font-weight: var(--weight-medium);
      color: var(--text-muted);
      cursor: pointer;
      transition: color var(--fast) var(--ease);
    }

    .weather-forecast__tab::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 2px;
      background: transparent;
      transition: background var(--fast) var(--ease);
    }

    .weather-forecast__tab:hover {
      color: var(--text);
    }

    .weather-forecast__tab.is-active {
      color: var(--text);
    }

    .weather-forecast__tab.is-active::after {
      background: var(--accent-weather);
    }

    .weather-forecast__divider {
      width: 1px;
      height: 16px;
      background: color-mix(in oklab, var(--text) 14%, transparent);
    }

    .weather-forecast__content {
      position: relative;
      overflow: hidden;
      min-height: 220px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }

    .weather-forecast__content::after,
    .weather-forecast__content::before {
      content: '';
      position: absolute;
      top: var(--space-2);
      bottom: var(--space-2);
      width: 42px;
      pointer-events: none;
      opacity: 0;
      transition: opacity var(--fast) var(--ease);
      z-index: 1;
    }

    .weather-forecast__content::after {
      right: 0;
      background-image:
        linear-gradient(270deg, color-mix(in oklab, var(--surface-2) 94%, transparent) 0%, transparent 68%),
        url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%2306B6D4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5.5%203.5l5%204.5-5%204.5%22%2F%3E%3Cpath%20d%3D%22M10.2%208H4%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat, no-repeat;
      background-size: 100% 100%, 16px 16px;
      background-position: center, calc(100% - 14px) 50%;
    }

    .weather-forecast__content::before {
      left: 0;
      background-image:
        linear-gradient(90deg, color-mix(in oklab, var(--surface-2) 94%, transparent) 0%, transparent 68%),
        url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22none%22%20stroke%3D%22%2306B6D4%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203.5L5.5%208l5%204.5%22%2F%3E%3Cpath%20d%3D%22M5.8%208h6.2%22%2F%3E%3C%2Fsvg%3E');
      background-repeat: no-repeat, no-repeat;
      background-size: 100% 100%, 16px 16px;
      background-position: center, 14px 50%;
    }

    .weather-forecast__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 42px;
      height: calc(100% - var(--space-4));
      border: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-weather);
      cursor: pointer;
      z-index: 2;
      opacity: 0;
      transition: opacity var(--fast) var(--ease);
    }

    .weather-forecast__nav::after {
      content: '';
      display: block;
      width: 18px;
      height: 18px;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .weather-forecast__nav--prev {
      left: 0;
    }

    .weather-forecast__nav--prev::after {
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%2306B6D4%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.2%204.3L6.2%209l5%204.7%22%2F%3E%3Cpath%20d%3D%22M6.8%209h7%22%2F%3E%3C%2Fsvg%3E');
    }

    .weather-forecast__nav--next {
      right: 0;
    }

    .weather-forecast__nav--next::after {
      background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%2306B6D4%22%20stroke-width%3D%221.9%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.8%204.3l5%204.7-5%204.7%22%2F%3E%3Cpath%20d%3D%22M11.2%209H4.2%22%2F%3E%3C%2Fsvg%3E');
    }

    .weather-forecast__nav:disabled {
      cursor: default;
      opacity: 0;
      pointer-events: none;
    }

    .weather-forecast__content[data-scrollable="true"] .weather-forecast__nav {
      opacity: 0.86;
    }

    .weather-forecast__content[data-scroll-left="hidden"] .weather-forecast__nav--prev,
    .weather-forecast__content[data-scroll-right="hidden"] .weather-forecast__nav--next {
      opacity: 0;
    }

    .weather-forecast__content[data-scrollable="true"]::after {
      opacity: 1;
    }

    .weather-forecast__content[data-scroll-right="hidden"]::after {
      opacity: 0;
    }

    .weather-forecast__content[data-scrollable="true"]::before {
      opacity: 1;
    }

    .weather-forecast__content[data-scroll-left="hidden"]::before {
      opacity: 0;
    }

    .weather-daily-list,
    .weather-hourly-list {
      display: none;
      flex-direction: row;
      gap: var(--space-3);
      overflow-x: auto;
      overflow-y: hidden;
      padding: var(--space-2) var(--space-1);
      margin: 0;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--border) transparent;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--space-1);
      touch-action: pan-x pan-y;
      box-sizing: border-box;
    }

    .weather-daily-list.is-visible,
    .weather-hourly-list.is-visible {
      display: flex;
    }

    .weather-daily-list::-webkit-scrollbar,
    .weather-hourly-list::-webkit-scrollbar {
      height: 6px;
    }

    .weather-daily-list::-webkit-scrollbar-track,
    .weather-hourly-list::-webkit-scrollbar-track {
      background: transparent;
    }

    .weather-daily-list::-webkit-scrollbar-thumb,
    .weather-hourly-list::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: var(--radius-xs);
    }

    .weather-daily-list::-webkit-scrollbar-thumb:hover,
    .weather-hourly-list::-webkit-scrollbar-thumb:hover {
      background: var(--border-strong);
    }

    .weather-daily__card,
    .weather-hourly__card {
      flex: 0 0 clamp(104px, 26vw, 124px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-3);
      border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
      border-radius: var(--radius-md);
      background: color-mix(in oklab, var(--surface) 96%, transparent);
      text-align: center;
      height: 204px;
      min-height: 204px;
      width: clamp(104px, 26vw, 124px);
      min-width: clamp(104px, 26vw, 124px);
      max-width: clamp(104px, 26vw, 124px);
      scroll-snap-align: start;
      box-sizing: border-box;
    }

    @media (min-width: 768px) {

      .weather-daily__card,
      .weather-hourly__card {
        height: auto;
      }
    }

    .weather-daily__day,
    .weather-hourly__time {
      font-size: var(--size-13);
      font-weight: var(--weight-medium);
      color: var(--text);
    }

    .weather-daily__icon,
    .weather-hourly__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      color: var(--text);
    }

    .weather-daily__icon svg,
    .weather-hourly__icon svg {
      width: 100%;
      height: 100%;
    }

    .weather-daily__condition,
    .weather-hourly__condition {
      font-size: var(--size-13);
      color: var(--text-muted);
      font-weight: var(--weight-regular);
      line-height: 1.3;
      text-align: center;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      max-width: 100%;
    }

    .weather-daily__temps {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--space-2);
      padding-top: var(--space-2);
    }

    .weather-daily__temp {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-variant-numeric: tabular-nums;
    }

    .weather-daily__temp-primary {
      font-size: var(--size-16);
      font-weight: var(--weight-medium);
    }

    .weather-daily__temp-secondary {
      font-size: var(--size-12);
      color: var(--text-muted);
    }

    .weather-daily__temp--low .weather-daily__temp-primary {
      color: var(--text-muted);
      font-weight: var(--weight-regular);
    }

    .weather-daily__precip,
    .weather-hourly__precip {
      font-size: var(--size-12);
      color: var(--text-muted);
    }

    .weather-hourly__temp {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-variant-numeric: tabular-nums;
      padding-top: var(--space-2);
    }

    .weather-hourly__temp-primary {
      font-size: var(--size-16);
      font-weight: var(--weight-medium);
    }

    .weather-hourly__temp-secondary {
      font-size: var(--size-12);
      color: var(--text-muted);
    }

    .skeleton {
      display: block;
      width: 100%;
      height: 12px;
      border-radius: var(--radius-pill);
      background: linear-gradient(90deg,
          color-mix(in oklab, var(--surface-hover) 60%, transparent) 0%,
          color-mix(in oklab, var(--surface-hover) 80%, transparent) 50%,
          color-mix(in oklab, var(--surface-hover) 60%, transparent) 100%);
      animation: weather-skeleton 1.6s ease-in-out infinite;
    }

    .skeleton--title {
      height: 20px;
      border-radius: var(--radius-sm);
    }

    .skeleton--text {
      height: 14px;
      border-radius: var(--radius-sm);
    }

    @keyframes weather-skeleton {
      0% {
        background-position: -200px 0;
      }

      100% {
        background-position: calc(200px + 100%) 0;
      }
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .weather-page__inner {
        padding: var(--space-5) var(--space-3) var(--space-6);
      }

      .weather-card {
        padding: var(--space-3) var(--space-3);
        width: 100%;
        box-sizing: border-box;
      }

      .weather-city {
        padding: var(--space-3) var(--space-3);
        width: 100%;
        box-sizing: border-box;
      }

      .weather-city__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        width: 100%;
        position: relative;
        padding-right: clamp(48px, 18vw, 72px);
      }

      .weather-city__title {
        width: 100%;
      }

      .weather-city__header-aside {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--space-2);
      }

      .weather-city__header-meta {
        width: auto;
        justify-content: flex-end;
        gap: var(--space-1);
        flex-wrap: nowrap;
      }

      .weather-city__header-meta .weather-sun-time {
        display: none;
      }

      .weather-city__body {
        grid-template-columns: 1fr;
        gap: var(--space-4);
        width: 100%;
      }

      .weather-current__overview {
        flex-direction: row;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
      }

      .weather-condition__icon {
        width: 56px;
        height: 56px;
      }

      .weather-current-time {
        display: inline-flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--space-1);
      }

      .weather-current-time__label {
        display: inline-flex;
        font-size: var(--size-13);
      }

      .weather-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
      }

      .weather-forecast__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
      }

      .weather-forecast__tabs {
        width: auto;
        justify-content: flex-start;
        gap: var(--space-3);
      }

      .weather-forecast__content {
        min-height: 192px;
        width: 100%;
      }

      .weather-forecast__content::before,
      .weather-forecast__content::after {
        width: 28px;
      }

      .weather-forecast__nav {
        width: 28px;
        display: none;
      }

      .weather-daily-list,
      .weather-hourly-list {
        margin: 0;
        padding: var(--space-2) 0;
      }

      .weather-daily__card,
      .weather-hourly__card {
        flex: 0 0 clamp(100px, 28vw, 124px);
        width: clamp(100px, 28vw, 124px);
        min-width: clamp(100px, 28vw, 124px);
        min-height: 200px;
      }
    }