@media (max-width: 980px) {
  :root {
    --container: min(100% - 28px, 1180px);
  }

  .nav {
    position: relative;
  }

  .icon-button.nav-toggle {
    display: grid;
  }

  .nav-links {
    position: absolute;
    z-index: 15;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 10px min(20px, 4vw);
    background: rgba(7, 27, 20, 0.97);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }

  .nav-links a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .hero {
    min-height: 88svh;
    padding-top: 104px;
  }

  .hero-inner,
  .page-hero-inner,
  .section-heading,
  .two-column,
  .home-intro,
  .admin-login-panel,
  .shop-blog-layout,
  .shop-grid,
  .blog-grid,
  .chat-layout,
  .chat-page-grid,
  .planner-app-grid,
  .mobile-app-layout,
  .forum-layout,
  .admin-app,
  .admin-dashboard-grid,
  .admin-detail-grid,
  .admin-grid,
  .travel-map-grid,
  .admin-map-grid,
  .retreat-why-grid,
  .coffee-story-hero-inner,
  .coffee-story-layout,
  .coffee-quote-grid,
  .coffee-detail-grid,
  .public-footer-inner {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    gap: 32px;
  }

  .travel-letter-paper {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .retreat-video-wrap {
    grid-template-columns: 1fr;
  }

  .hero-side-logo {
    justify-self: start;
    width: min(220px, 46vw);
  }

  h1 {
    font-size: 4rem;
  }

  .dashboard-grid,
  .wide-grid,
  .home-card-grid,
  .home-feature-grid,
  .quick-grid,
  .page-list-grid,
  .trip-grid,
  .shop-product-grid,
  .knowledge-grid,
  .premium-grid,
  .premium-comparison-grid,
  .admin-stat-grid,
  .route-grid,
  .retreat-card-grid,
  .retreat-event-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trip-card.featured {
    grid-column: 1 / -1;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
  }

  .cookie-actions {
    justify-content: flex-start;
  }

  .cart-card {
    position: static;
  }

  .product-buy-card {
    position: static;
  }

  .planner-side-panel {
    position: static;
  }

  .map-planner-side {
    position: static;
  }

  /* Mapa/Punkty/Planer jako osobne zakladki zamiast wszystkiego zlanego w
     jedna kolumne (patrz .travel-map-grid -> 1fr wyzej) - przelaczane przez
     bindMobileViewTabs() w map.js. Domyslnie aktywna jest "map". */
  [data-mobile-view] {
    display: none;
  }

  [data-mobile-view].is-mobile-active {
    display: revert;
  }

  .mobile-planer-tabs {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 16px calc(-1 * min(20px, 4vw)) 0;
    background: #0d261b;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
  }

  .mobile-planer-tabs button {
    flex: 1;
  }

  .planner-builder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-app-device {
    max-width: 430px;
    justify-self: center;
  }

  .admin-sidebar {
    position: static;
  }

  .admin-side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .retreat-hero {
    min-height: 86svh;
  }

  .coffee-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .retreat-lagoon-hero {
    min-height: 340px;
  }

  .admin-command-center,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-command-actions {
    justify-content: flex-start;
  }

  .admin-console-page .admin-app {
    grid-template-columns: 1fr;
  }

  .admin-console-page .admin-sidebar {
    position: static;
    max-height: none;
  }

  .nav-actions {
    gap: 0;
  }

  .nav-actions .cart-nav-link,
  .nav-actions .member-menu {
    display: none;
  }

  .nav-links-divider {
    height: 1px;
    margin: 6px 4px 8px;
    background: rgba(255, 255, 255, 0.14);
  }

  .nav-links .cart-nav-link {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 4px;
    border: 0;
    border-radius: 0;
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
  }

  .nav-links .cart-nav-link::after {
    content: "Koszyk";
    font-size: 0.94rem;
  }

  .nav-links .cart-nav-badge {
    margin-left: auto;
  }

  .nav-links .member-menu {
    display: block;
    width: 100%;
  }

  .nav-links .member-menu-summary,
  .nav-links .member-menu-toggle-button {
    display: none;
  }

  .nav-links .member-menu-panel {
    position: static;
    display: block;
    min-width: 0;
    padding: 4px 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .nav-links .member-menu-panel a,
  .nav-links .member-menu-panel button.member-menu-link {
    display: flex;
    width: 100%;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
  }

  .nav-links .member-menu-logout {
    margin: 10px 4px 4px;
    width: calc(100% - 8px);
    justify-content: center;
  }
}

@media (max-width: 680px) {
  :root {
    --container: min(100% - 24px, 1180px);
  }

  .nav {
    height: 88px;
  }

  .brand-mark {
    width: 80px;
    height: 80px;
  }

  .brand-name {
    max-width: 132px;
    line-height: 1.1;
  }

  .nav-actions .primary-link,
  .nav-actions .primary-button {
    display: none;
  }

  .hero-actions .primary-link,
  .hero-actions .secondary-link,
  .admin-console-actions .primary-button,
  .admin-console-actions .secondary-button,
  .access-panel .primary-button,
  .access-panel .secondary-button {
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 98px 0 50px;
    background-position: 58% center;
  }

  .hero-home {
    min-height: 82svh;
  }

  .hero-logo {
    width: min(68vw, 340px);
    max-width: calc(100vw - 48px);
    padding: 8px;
  }

  .hero-side-logo {
    width: min(170px, 48vw);
  }

  .page-hero {
    min-height: auto;
    padding: 96px 0 44px;
    background-position: 58% center;
  }

  .retreat-hero {
    min-height: auto;
    padding: 96px 0 48px;
  }

  .coffee-story-hero {
    min-height: auto;
    padding: 96px 0 54px;
  }

  .coffee-story-copy h1 {
    max-width: 10ch;
  }

  .coffee-origin-card,
  .coffee-detail-panel {
    padding: 18px;
  }

  .coffee-process-grid {
    grid-template-columns: 1fr;
  }

  .coffee-video-slot {
    min-height: 220px;
  }

  .coffee-quote-band {
    padding: 58px 0;
  }

  .coffee-quote-grid p {
    padding-left: 16px;
    font-size: 1rem;
  }

  .retreat-hero .eyebrow {
    gap: 9px;
    margin-bottom: 12px;
    font-size: 0.52rem;
    word-spacing: 0.12em;
  }

  .retreat-hero .eyebrow::before {
    height: 15px;
  }

  .retreat-hero .eyebrow::after {
    width: 20px;
  }

  .retreat-lagoon-hero {
    min-height: 300px;
    background-position: 58% center;
  }

  h1 {
    font-size: 3.05rem;
    max-width: 10ch;
  }

  h2 {
    font-size: 2.2rem;
  }

  .hero-copy {
    font-size: 1.04rem;
  }

  .dashboard-grid,
  .wide-grid,
  .home-card-grid,
  .home-feature-grid,
  .quick-grid,
  .page-list-grid,
  .trip-grid,
  .shop-product-grid,
  .knowledge-grid,
  .premium-grid,
  .admin-stat-grid,
  .route-grid,
  .retreat-card-grid,
  .retreat-event-preview {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 58px 0;
  }

  .admin-console-topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
  }

  .admin-console-actions {
    width: 100%;
  }

  .admin-console-main {
    width: min(100% - 24px, 1480px);
    padding-top: 14px;
  }

  .admin-login-panel {
    min-height: auto;
    padding: 22px;
  }

  .travel-letter-section {
    padding: 70px 0;
  }

  .travel-letter-paper {
    padding: 30px 20px;
  }

  .travel-letter-top {
    display: grid;
    gap: 24px;
    min-height: 0;
    max-width: 100%;
    padding-right: 0;
  }

  .travel-letter-paper::before {
    inset: 10px;
  }

  .paper-clip {
    top: -18px;
    left: 26px;
    width: 28px;
    height: 64px;
  }

  .travel-polaroid {
    position: relative;
    top: auto;
    right: auto;
    justify-self: end;
    max-width: 280px;
    margin-top: 8px;
  }

  .travel-stamp {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: end;
    width: 116px;
    height: 116px;
    margin-top: 10px;
    font-size: 0.68rem;
  }

  .dashboard-card {
    min-height: 178px;
  }

  .card-number {
    margin-bottom: 20px;
  }

  .product-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .mini-stat-grid {
    grid-template-columns: 1fr;
  }

  .flavor-grid {
    grid-template-columns: 1fr;
  }

  .list-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .list-row strong {
    grid-column: 2;
    justify-self: start;
  }

  .timeline-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .map-canvas {
    min-height: 360px;
  }

  .thai-map-canvas {
    min-height: 600px;
  }

  .calendar-card {
    grid-template-columns: 1fr;
  }

  .calendar-date {
    width: 100%;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 8px;
    padding: 12px;
  }

  .planner-builder {
    grid-template-columns: 1fr;
  }

  .mobile-feature-grid,
  .mobile-quick-grid,
  .mobile-guide-grid {
    grid-template-columns: 1fr;
  }

  .mobile-app-device {
    width: 100%;
    min-height: 680px;
    border-radius: 24px;
    padding: 10px;
  }

  .mobile-bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-list-card {
    grid-template-columns: 1fr;
  }

  .mobile-account-strip {
    grid-template-columns: 1fr;
  }

  .mobile-account-strip .secondary-button {
    width: 100%;
  }

  .google-calendar-cell {
    min-height: 72px;
    padding: 6px;
  }

  .calendar-event-pill {
    font-size: 0.62rem;
  }

  .planner-builder .primary-button {
    width: 100%;
  }

  .product-thumb {
    width: 58px;
    height: 58px;
  }

  .price {
    grid-column: 2;
    justify-self: start;
  }

  .article-item {
    grid-template-columns: 1fr;
  }

  .read-time {
    justify-self: start;
  }

  .chat-widget {
    min-height: 470px;
  }

  .message {
    max-width: 92%;
  }

  .forum-topic-row,
  .admin-row,
  .admin-record {
    grid-template-columns: 1fr;
  }

  .forum-topic-stats {
    min-height: auto;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 8px;
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 12px 16px;
  }

  .shop-product-footer,
  .forum-detail-head,
  .community-message-head,
  .admin-row form,
  .trip-planner-toolbar,
  .trip-planner-actions,
  .trip-planner-head,
  .route-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-product-footer .primary-button,
  .admin-row .secondary-button,
  .admin-record .secondary-button,
  .admin-record .text-button,
  .trip-planner-actions .primary-button,
  .trip-planner-actions .secondary-button {
    width: 100%;
  }

  .admin-side-nav,
  .admin-filters,
  .admin-toolbar,
  .admin-record-head,
  .admin-row-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-side-nav {
    grid-template-columns: 1fr;
  }

  .trip-point-row {
    grid-template-columns: 1fr;
  }

  .map-offer-main {
    grid-template-columns: 1fr;
  }

  .map-offer-image {
    min-height: 190px;
  }

  .map-offer-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .map-offer-actions .primary-button,
  .map-offer-actions .secondary-button {
    width: 100%;
  }

  .trip-point-actions {
    justify-content: flex-start;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-plan-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-dialog {
    padding: 22px;
  }

  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 16px;
  }

  .cookie-actions .primary-button,
  .cookie-actions .secondary-button {
    width: 100%;
  }
}