/* Concrete — mobile overrides (layout and pagination for phones). */

@media (max-width: 1024px) {
  .menu-section {
    position: absolute;
    zoom: 0.8;
    right: 28px;
    margin-top: 4px;
  }

  .main-menu {
    overflow: hidden;
  }

  main * p:not(.line):not(.text-copy) {
    font-size: 2.5rem;
    line-height: 3.8rem;
  }

  .swiper-slide {
    flex-direction: column;
  }

  .swiper-container-vertical > .swiper-pagination-bullets {
    left: auto;
    right: -2rem;
    display: flex;
    bottom: 0;
    top: 0;
    justify-content: center;
  }

  .swiper-image {
    width: unset;
    height: 50%;
  }

  .swiper-container-vertical .works-list,
  .swiper-container-vertical > .swiper-pagination-bullets.works-list {
    right: 7.6rem;
    bottom: 3rem;
    top: auto;
  }
  .swiper-container-vertical .works-list .swiper-pagination-bullet,
  .swiper-container-vertical
    > .swiper-pagination-bullets.works-list
    .swiper-pagination-bullet {
    height: 5rem;
  }

  .main:not(.home-main) .swiper-slide.swiper-slide-active .link-line {
    left: 2.4rem;
    bottom: auto;
    top: -10rem;
  }

  .swiper-wrap-text h1 {
    font-size: 4rem;
    line-height: 5.2rem;
  }

  .home-main .swiper-slide .swiper-image:nth-child(2) {
    height: 100%;
  }

  .home-main .swiper-container-vertical > .swiper-pagination-bullets {
    right: 10vw;
    bottom: auto;
    left: auto;
    top: 20vh;
  }

  .home-main .swiper-slide .image {
    transition: all 0.3s linear;
    right: 10vw;
  }

  .home-main .swiper-slide.swiper-slide-active .image {
    clip: rect(0, 100vw, 100vh, 0);
  }

  .content .quotation-block {
    width: auto;
    display: flex;
    flex-direction: column;
  }
  .content .quotation-block p {
    font-size: 2.4rem;
    line-height: 3.8rem;
    flex: 1;
    overflow: auto;
  }

  .exhibitions-wrapper ul li {
    width: 100%;
  }

  .exhibitions-wrapper .port > * .img-exhibitions,
  .exhibitions-wrapper .port > * .description {
    max-width: unset;
    padding: 20px !important;
  }


  .main.works-main .swiper-slide.swiper-slide-active .link-line {
    bottom: 0;
    left: 0;
    top: auto;
  }

  .contact-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
  }
  .contact-wrapper > .row {
    flex-direction: column;
  }

  .wrap-map {
    max-height: 30vh;
  }

  #feedback-form textarea {
    height: 20vh;
  }
}

@media (max-width: 900px) {
  .parallax {
    --frame-scale: 0.9;
  }
  .gallery-grid-wrapper {
    column-count: 2;
  }
  .main-menu .parallax {
    --frame-scale: 0.82;
  }

  .home-main .slider-relative,
  .works-main .slider-relative,
  .news-main .slider-relative {
    position: relative;
  }

  .swipe-hint {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(42, 42, 42, 0.25);
    backdrop-filter: blur(6px);
    color: var(--secondary);
    font-size: 12px;
    letter-spacing: 0.02em;
    pointer-events: none;
  }

  .swipe-hint__icon {
    width: 14px;
    height: 22px;
    position: relative;
    display: inline-block;
  }

  .swipe-hint__icon::before,
  .swipe-hint__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--secondary);
    border-bottom: 2px solid var(--secondary);
    transform: translateX(-50%) rotate(225deg);
    opacity: 0.85;
  }

  .swipe-hint__icon::before {
    top: 0;
  }

  .swipe-hint__icon::after {
    bottom: 0;
    transform: translateX(-50%) rotate(45deg);
  }

  .swipe-hint__text {
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  .menu-section {
    right: 0;
  }

  .exhibitions-wrapper .close {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    background-size: 20px 20px;
  }
  .exhibitions-wrapper.item_open .close {
    top: max(1rem, env(safe-area-inset-top, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .menu-section .menu::before,
  .menu-section .menu::after {
    display: none;
  }

  header {
    height: 60px;
  }
  header .site-logo img,
  header .site-logo .custom-logo {
    max-height: 50px;
  }

  .main-menu {
    overflow: hidden;
  }

  .slider-relative {
    height: calc(100vh - 120px);
  }

  .gallery-main {
    max-height: 100vh;
    padding: 8rem 3rem 0;
  }

  .gallery-wrapper .gallery-grid-item {
    width: calc(50% - 20px);
  }

  .swiper-nav-wrapper {
    transform: rotate(90deg);
    bottom: 7rem !important;
    display: flex;
    right: 1rem;
  }
  .swiper-nav-wrapper .swiper-button-next,
  .swiper-nav-wrapper .swiper-button-prev {
    font-size: 0;
    margin: 0;
    width: 0;
    float: unset;
  }
  .swiper-nav-wrapper .swiper-button-next:before,
  .swiper-nav-wrapper .swiper-button-prev:before {
    display: none;
  }
  .swiper-nav-wrapper .swiper-button-next:after,
  .swiper-nav-wrapper .swiper-button-prev:after {
    font-size: 20px;
  }
}

@media (max-width: 520px) {
  .parallax {
    --frame-scale: 0.8;
  }
  .main-menu .parallax {
    --frame-scale: 0.72;
  }
  body.page-template-page-exhibitions .exhibitions-wrapper ul {
    grid-template-columns: 1fr;
  }

  .main-menu .menu-parallax-stage {
    overflow: hidden;
  }

  .main-menu .parallax {
    height: 100%;
  }

  .main-menu .parallax .level:not(.canvas) {
    display: none;
  }

  .main-menu .parallax .level,
  .main-menu .parallax .level-inner {
    transform: none !important;
    will-change: auto;
  }

  .main-menu .parallax .level.canvas,
  .main-menu .parallax .level.canvas .level-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  /* Gallery: 2 columns (overrides Customizer when needed) */
  .gallery-grid-wrapper {
    column-count: 2 !important;
    column-gap: 16px !important;
  }
}

@media (max-width: 480px) {
  .concrete-mobile-only {
    display: block !important;
  }
  .concrete-desktop-only {
    display: none !important;
  }

  :root {
    --concrete-safe-bottom: env(safe-area-inset-bottom, 0px);
    --concrete-mobile-pad: 16px;
    --concrete-mobile-nav-h: 52px;
  }

  /* Let content use full width on mobile */
  .main {
    width: 100%;
  }
  .main.exhibitions-main {
    padding: 0 !important;
    max-height: calc(100dvh - 120px);
    overflow: auto;
  }
  .container {
    max-width: 100%;
  }

  /* ===== Dots pagination (ul.home-slider-nav) -> horizontal, bottom ===== */
  .home-slider-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(10px + var(--concrete-safe-bottom)) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .home-slider-nav li {
    width: 22px !important;
    height: 6px !important;
    margin: 0 !important;
    border-radius: 999px;
  }
  .home-slider-nav li.current {
    width: 44px !important;
  }

  /* Give slides some breathing room so bottom dots never overlap text */
  .slider-relative {
    height: calc(100dvh - 140px) !important;
  }

  /* =====================================================================
     HOME (front-page.php)
     Image on top, text under it, CTA under text, dots at the very bottom.
     ===================================================================== */
  body.home .home-main .swiper-slide {
    display: flex !important;
    flex-direction: column !important;
  }

  body.home .home-main .swiper-slide .image,
  body.home .home-main .swiper-slide .content {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
  }



  /* make image taller */
  body.home .home-main .swiper-slide .image {
    width: 100%;
    overflow: hidden;
    clip: auto !important;
    height: 56vh !important;
    max-height: none !important;
  }
  body.home .home-main .swiper-slide.swiper-slide-active .image {
    clip: auto !important;
  }
  body.home .home-main .swiper-slide .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* duplicate selectors for other hero classes */
  body.home .home-main .home-slider-img,
  body.home .home-main .home-slider-img img,
  body.home .home-main .concrete-home-image,
  body.home .home-main .concrete-home-image img {
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  /* lift content onto image */
  body.home .home-main .swiper-slide .content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    padding: var(--concrete-mobile-pad);
    padding-bottom: calc(
      var(--concrete-mobile-nav-h) + var(--concrete-safe-bottom)
    );
  }
  body.home .home-main .content h1 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    position: relative;
    z-index: 6;
  }
  body.home .home-main .content .quotation-block {
    margin: 18px 0 0 0;
    width: 100%;
  }
  body.home .home-main .content .quotation-block .link-line {
    margin-top: 18px;
    width: 25%;
  }

  /* Home: ensure ::after anchors to link, not parent */
  body.home .home-main .link-line {
    position: relative;
  }

  /* Home: ensure link-line stripe only on mobile (desktop — main.css) */
  body.home .home-main .link-line::after,
  body.home .home-main .content .quotation-block .link-line::after {
    opacity: 1 !important;
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    width: 40px !important;
    height: 1px !important;
    background: currentColor !important;
    transform: translateY(-50%) !important;
    pointer-events: none;
  }

  /* Move dots from "right:30vw" to full bottom */
  body.home .home-slider-nav {
    right: 0 !important;
  }

  /* =====================================================================
     ABOUT (page-about.php)
     Image top, text bottom, dots horizontal bottom.
     ===================================================================== */
  body.page-template-page-about .about-main .swiper-slide {
    flex-direction: column !important;
  }
  body.page-template-page-about .about-main .swiper-image {
    width: 100% !important;
    height: auto !important;
  }
  body.page-template-page-about .about-main .swiper-image:first-child {
    height: 42vh !important;
  }
  body.page-template-page-about .about-main .swiper-image:last-child {
    flex: 1;
  }
  body.page-template-page-about
    .about-main
    .swiper-image-inner.slider-image-right {
    padding: var(--concrete-mobile-pad) !important;
  }

  /* =====================================================================
     NEWS (home.php)
     Already close: just stack + keep dots at bottom.
     ===================================================================== */
  body.blog .news-main .swiper-slide {
    flex-direction: column !important;
  }
  body.blog .news-main .swiper-image {
    width: 100% !important;
    height: auto !important;
  }
  body.blog .news-main .swiper-image:first-child {
    height: 42vh !important;
  }
  body.blog .news-main .swiper-image:last-child {
    flex: 1;
  }
  body.blog .news-main .swiper-image-inner.slider-news-right,
  body.blog .news-main .swiper-image-inner.slider-image-right {
    padding: var(--concrete-mobile-pad) !important;
  }
  body.blog .news-main .news-data {
    position: static !important;
    padding: 12px var(--concrete-mobile-pad) !important;
  }

  /* =====================================================================
     SKILLS (page-skills.php)
     Left part only, full-screen.
     Right half hidden, categories hidden.
     "View gallery" button inside the left text area.
     ===================================================================== */
  /* Skills: on mobile show ONLY mobile-only */
  body.page-template-page-skills .works-main .swiper-slide {
    position: relative !important;
    height: 100dvh;
  }
  body.page-template-page-skills .works-main .swiper-image {
    width: 100% !important;
  }
  body.page-template-page-skills .works-main .swiper-image:first-child {
    height: 100% !important;
    position: relative;
  }
  body.page-template-page-skills
    .works-main
    .swiper-image-inner.slider-image-left {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  /* right part — after move .swiper-wrap-text is 3rd child */
  body.page-template-page-skills .works-main .swiper-image:nth-child(3) {
    display: none !important;
  }
  body.page-template-page-skills .works-main .works-list {
    display: none !important;
  }
  /* mobile overlay only — don't touch desktop text (.concrete-desktop-only) */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only.swiper-wrap-text {
    z-index: 50 !important;
    color: #fff;
    position: absolute;
    inset: 0;
    padding: var(--concrete-mobile-pad) !important;
    /* important: reserve bottom for pagination */
    padding-bottom: calc(56px + var(--concrete-safe-bottom));
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    height: 100%;
  }

  /* stick to bottom above dots — margin-top: auto is key */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only
    .concrete-mobile-gallery-link {
    margin-top: auto !important;
    margin-bottom: 6px !important;
    z-index: 9999;
  }

  /* 1) link container always visible, sticks to bottom above pagination */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only.swiper-wrap-text
    .concrete-mobile-gallery-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    margin-top: 10% !important;
    margin-bottom: 6px !important;
  }

  /* 2) the link itself */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only.swiper-wrap-text
    .concrete-mobile-gallery-link
    a {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Skills mobile CTA: prevent main.css from pulling .link-line (absolute/top:-10rem) */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only.swiper-wrap-text
    .concrete-mobile-gallery-link
    .link-line {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  /* 3) text scrolls, link stays at bottom (not inside overflow) */
  body.page-template-page-skills
    .works-main
    .concrete-mobile-only.swiper-wrap-text
    .text-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px; /* scrollbar not flush with text */
    position: relative;
    z-index: 50;
  }

  /* pagination below link */
  body.page-template-page-skills .works-main .home-slider-nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(10px + var(--concrete-safe-bottom));
    z-index: 30;
  }

  /* =====================================================================
     GALLERY (page-gallery.php)
     iPhone 430px: keep 2 columns (not 1).
     ===================================================================== */
  .gallery-wrapper,
  .gallery-grid-wrapper,
  .gallery-grid-wrapper a {
    touch-action: manipulation;
  }

  .gallery-wrapper nav.tabs {
    align-self: center;
    align-items: center;
  }

  .gallery-wrapper nav.tabs li {
    font-size: 2.5rem;
    padding: 0 1rem;
    list-style: none;
    display: inline-block;
    cursor: pointer;
    transition: 0.5s;
  }

  .gallery-wrapper nav.tabs li a {
    display: block;
    padding: 15px;
  }

  /* NOTE (DO NOT BREAK):
     Gallery layout is controlled by Customizer inline CSS (functions.php).
     Do NOT override gallery-grid-wrapper display/grid/columns/gap here. */

  /* =====================================================================
     EXHIBITIONS (page-exhibitions.php)
     2 columns grid.
     ===================================================================== */
  body.page-template-page-exhibitions .exhibitions-wrapper {
    width: 100%;
  }
  body.page-template-page-exhibitions .exhibitions-wrapper .cont ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 var(--concrete-mobile-pad);
    margin: 0;
  }
  body.page-template-page-exhibitions .exhibitions-wrapper .cont ul li {
    width: 100% !important;
    margin: 0 !important;
    list-style: none;
  }
  body.page-template-page-exhibitions .exhibitions-wrapper .cont ul li a {
    aspect-ratio: 1 / 1;
    display: block;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
  }
  body.page-template-page-exhibitions .exhibitions-wrapper .cont ul li img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* exhibition modal: stack columns */


  body.page-template-page-exhibitions .port .port-img img {
    width: 100%;
    height: auto;
    display: block;
  }


  body.page-template-page-exhibitions .port .description {
    padding-top: 14px;
  }

  /* Exhibitions: duplicate selector — works even if grid changes (.port/.row/.col-*) */
  body.page-template-page-exhibitions a.exhibition-full-link img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Exhibitions: close button — offsets match parent .port padding (same as --concrete-mobile-pad) + safe area */
  body.page-template-page-exhibitions .exhibitions-wrapper.item_open .close {
    top: max(var(--concrete-mobile-pad, 16px), env(safe-area-inset-top, 0px));
    right: max(
      var(--concrete-mobile-pad, 16px),
      env(safe-area-inset-right, 0px)
    );
  }

  /* =====================================================================
     CONTACT (page-contact.php)
     Map top, form bottom. Elastic input: label centered on line, moves up on focus.
     ===================================================================== */

  /* Contact mobile: restore elastic input logic */
  body.page-template-page-contact .cf7-custom-wrapper .wpcf7-form p, 
  body.page-template-page-contact .contact-main label, 
  body.page-template-page-contact .contact-main .inp .label {
    width: 100% !important;
  }
  
  body.page-template-page-contact .contact-main .inp {
    max-width: 100%;
  }

  body.page-template-page-contact .contact-main .inp input {
    height: 48px;
    padding: 12px 0;
  }

  body.page-template-page-contact .contact-main .inp .label {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 18px;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
  }

  /* Floating label as in original */
  body.page-template-page-contact
    .contact-main
    .inp
    input:not(:placeholder-shown)
    + .label {
    transform: translateY(-26px) scale(0.75) !important;
  }

  body.page-template-page-contact .contact-main .inp input:focus + .label {
    transform: translateY(-44px) scale(0.75) !important;
  }
  
  body.page-template-page-contact .contact-main .wrap-map iframe {
    width: 100% !important;
    height: 100% !important;
  }
  body.page-template-page-contact .contact-main .wrap-map {
    height: 42vh !important;
    min-height: 280px !important;
    background-color: transparent !important;
  }

  .contact-right {
    padding: 6rem 0 0 0 !important;
  }



  /* =====================================================================
     MENU overlay
     Background stretched full width, menu items on top of it.
     ===================================================================== */
  .main-menu {
    top: 0 !important;
    bottom: 0 !important;
  }
  .main-menu > .row,
  .main-menu > .row *[class*="col"] {
    height: 100% !important;
  }
  .main-menu .menu-parallax-stage .row {
    height: 100%;
  }
  .main-menu .menu-parallax-stage .col-8 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
  }
  /* Keep only the canvas background on mobile */
  .main-menu .menu-parallax-stage .parallax {
    display: block !important;
    height: 100% !important;
    min-height: 100dvh !important;
  }
  .main-menu .menu-parallax-stage .parallax:first-child {
    height: 100% !important;
  }
  .main-menu .menu-parallax-stage .parallax .level.canvas,
  .main-menu .menu-parallax-stage .parallax .level.canvas .level-inner {
    width: 100% !important;
    height: 100% !important;
  }
  .main-menu .menu-parallax-stage .parallax .level:not(.canvas) {
    display: none !important;
  }
  .main-menu .menu-parallax-stage .bg-menu {
    opacity: 1 !important;
    height: 100% !important;
  }
  .main-menu .menu-parallax-stage .bg-menu .example {
    height: 100% !important;
  }
  .main-menu .menu-parallax-stage .col-4 {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    z-index: 5;
  }
  .main-menu .nav-menu {
    margin-right: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: transparent !important;
  }
  .main-menu .nav-menu a {
    font-size: 5.4rem !important;
    line-height: 2.25 !important;
  }

  /* Make sure dots are always clickable above content */
  .home-slider-nav {
    z-index: 50 !important;
  }

  /* About/News: also "book-like" (top to bottom) + scroll */
  body.page-template-page-about .about-main .swiper-wrap-text,
  body.blog .news-main .swiper-wrap-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0; /* important for nested overflow */
  }

  body.page-template-page-about .about-main .swiper-wrap-text .text-wrapper,
  body.blog .news-main .swiper-wrap-text .text-wrapper {
    flex: 1 1 auto;
    overflow: auto;
    padding-right: 6px;
    min-height: 0;
  }

  /* Ensure page doesn't scroll as whole, only .text-wrapper scrolls */
  body.page-template-page-skills,
  body.page-template-page-skills .works-main,
  body.page-template-page-skills .slider-relative {
    height: 100dvh;
    overflow: hidden;
  }
  body.page-template-page-skills,
  body.page-template-page-skills .works-main {
    overscroll-behavior: none;
  }

  body.page-template-page-skills
    .works-main
    .concrete-mobile-only
    .text-wrapper {
    overscroll-behavior: contain;
  }

  /* Remove "air from top" — align headings and text */
  .swiper-wrap-text h1,
  .swiper-wrap-text h2,
  .swiper-wrap-text h3,
  .swiper-wrap-text p {
    margin-top: 0 !important;
  }

  .swiper-wrap-text p:last-child {
    margin-bottom: 0 !important;
  }

  /* Style scrollbar for Android */
  .text-wrapper::-webkit-scrollbar {
    width: 6px;
  }
  .text-wrapper::-webkit-scrollbar-thumb {
    border-radius: 6px;
  }

  /* Pagination: increase hit-area (easier to tap with thumb) */
  .concrete-swiper .swiper-pagination-bullet {
    margin: 0 6px !important;
  }

  /* invisible click zone enlarger */
  .concrete-swiper .swiper-pagination-bullet::before {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    transform: translate(-7px, -7px);
  }
}

@media (max-width: 414px) {
  .inp {
    max-width: unset;
  }
}

@media (max-width: 360px) {
  .gallery-grid-wrapper {
    column-count: 1 !important;
  }
}

/* ===== End media from main.css ===== */

/* PhotoSwipe: always show top bar (close button) */
.gallery-wrapper .pswp__ui--hidden .pswp__top-bar,
.gallery-wrapper .pswp__ui--idle .pswp__top-bar {
  opacity: 1 !important;
}

.gallery-wrapper .pswp__button--close {
  opacity: 1 !important;
}

/* PhotoSwipe: ensure overlay/pointer-events don't block clicks */
.pswp {
  z-index: 999999 !important;
}
.pswp__scroll-wrap {
  pointer-events: auto;
}

/* Decorative layers over gallery must not capture clicks */
.gallery-wrapper .overlay,
.gallery-wrapper .noise-layer {
  pointer-events: none;
}