/* BDY to BDY — responzivita: telefony, tablety, iPad, safe-area */

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(72px + env(safe-area-inset-top, 0));
}

body {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Hero — skrýt placeholder, když je fotka */
.hero > .ph {
  display: none;
}

/* iPad & tablety na šířku (769–1024 px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .cols .col:last-child {
    grid-column: 1 / -1;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .ft-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .cart-grid {
    gap: 32px;
  }
  .pdetail {
    gap: 36px;
  }
}

/* Tablety na výšku & velké telefony (≤768 px) */
@media (max-width: 768px) {
  .wrap {
    width: min(1320px, 94vw);
  }
  .sec {
    padding: clamp(44px, 8vw, 72px) 0;
  }
  .announce {
    font-size: 0.58rem;
    line-height: 1.55;
    letter-spacing: 0.12em;
    padding: 10px 12px;
    word-break: break-word;
  }
  .logo {
    font-size: 1.45rem;
  }
  .hd-icons {
    gap: 2px;
  }
  .hero {
    height: clamp(420px, 70vh, 600px);
    overflow: hidden;
  }
  .hero .rimg {
    object-position: center 18%;
  }
  .hero-c {
    padding: 0 16px;
    z-index: 5;
    pointer-events: none;
  }
  .hero-c .btn,
  .hero-c a {
    pointer-events: auto;
  }
  .hero > .spot {
    display: none !important;
  }
  .hero-c h1 {
    font-size: clamp(2rem, 9.5vw, 3.2rem);
  }
  .hero-c p {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }
  .shead {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }
  .edi-c h2 {
    font-size: clamp(1.7rem, 6vw, 2.35rem);
  }
  .edi-c p {
    max-width: none;
  }
  .news-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .news-form input,
  .news-form .btn-dark {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }
  .contact-servis {
    margin-top: 22px;
    padding-top: 20px;
  }
  .contact-servis p {
    font-size: 0.86rem;
  }
  .ft {
    padding: 40px 0 max(24px, env(safe-area-inset-bottom, 0));
  }
  .ft-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    padding-bottom: 24px;
    margin-bottom: 16px;
  }
  .ft-grid > div:first-child {
    grid-column: 1 / -1;
  }
  .ft-grid p {
    max-width: none;
    font-size: 0.82rem;
  }
  .ft-col h4 {
    margin-bottom: 8px;
    font-size: 0.68rem;
  }
  .ft-col a {
    display: inline-block;
    margin: 0 10px 4px 0;
    font-size: 0.82rem;
  }
  .ft-bot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    font-size: 0.72rem;
  }
  .tagline {
    font-size: clamp(1.05rem, 4.5vw, 1.45rem);
    padding: 36px 16px;
  }
  .col .cc {
    padding: 18px;
  }
  .col .cc h3 {
    font-size: 1.25rem;
  }
  .spot-pop {
    width: min(240px, calc(100vw - 40px));
  }
  .drawer {
    width: 100%;
    max-width: 100%;
  }
  .drawer-f {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0));
  }
  .cart-page {
    padding-bottom: max(56px, env(safe-area-inset-bottom, 0));
  }
  .cathead {
    padding-top: 32px;
  }
  .cathead h1 {
    font-size: clamp(1.85rem, 7vw, 2.6rem);
  }
  .filters {
    top: calc(66px + env(safe-area-inset-top, 0));
  }
  .filters-in {
    gap: 10px;
    padding: 12px 0;
  }
  .fgroup {
    width: 100%;
  }
  .fsort {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .fsort select {
    flex: 1;
    max-width: 100%;
    font-size: 16px;
  }
  .pcard .row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .pcard-add .btn {
    font-size: 0.65rem;
    padding: 12px 10px;
  }
  .pdetail {
    padding-top: 20px;
  }
  .related {
    padding-bottom: 56px;
  }
  .confirm {
    padding: 20px;
    padding-top: max(24px, env(safe-area-inset-top, 0));
  }
  .ui-panel--right {
    width: 100%;
    max-width: 100%;
  }
  .ui-panel--center {
    width: min(480px, calc(100vw - 24px));
    max-height: min(88vh, 640px);
  }
  .bodyna-fab {
    right: max(14px, env(safe-area-inset-right, 14px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0));
    width: 54px;
    height: 54px;
  }
  .bodyna-panel {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0));
    height: min(52vh, 400px);
  }
  .bodyna-in input {
    font-size: 16px;
  }
  .ui-x,
  .bodyna-in button,
  .size-opt {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Malé telefony (≤560 px) */
@media (max-width: 560px) {
  .pgrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pcard-img {
    aspect-ratio: 4/5;
  }
  .btn {
    padding: 14px 20px;
    font-size: 0.68rem;
  }
  .hero-c .btn-dark {
    width: 100%;
    max-width: 280px;
  }
  .ci {
    flex-wrap: wrap;
  }
  .ci-r {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
  }
  .litem-r {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .summary .btn-dark,
  .promo .btn {
    min-height: 48px;
  }
  .trust {
    gap: 10px;
    font-size: 0.68rem;
  }
}

/* iPhone SE a úzké displeje (≤390 px) */
@media (max-width: 390px) {
  .logo {
    font-size: 1.28rem;
  }
  .hd-in {
    gap: 8px;
  }
}

/* Dotyk — popup jen po klepnutí, ne hover */
@media (hover: none) {
  .spot-pop {
    bottom: auto;
    top: calc(100% + 10px);
  }
  .spot:not(.open) .spot-pop {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .spot.open .spot-pop {
    opacity: 1;
    pointer-events: auto;
  }
  .hero > .spot[data-pid="1"] .spot-pop {
    left: 0;
    right: auto;
    transform: translateY(0);
  }
  .hero > .spot[data-pid="2"] .spot-pop {
    left: auto;
    right: 0;
    transform: translateY(0);
  }
  .col .spot.open .spot-pop,
  .edi-img .spot.open .spot-pop {
    transform: translateX(-50%) translateY(0);
  }
}