/* ======================================================
   GLOBAL RESET + FULLSCREEN CATALOG
   ====================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
  background: var(--color-bg) !important;
  font-family: var(--font-family);
}

body.catalog-app-active {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #0C233B !important;
}

html.catalog-app-active,
body.catalog-app-active {
  height: auto;
  overscroll-behavior-y: contain;
}

body.catalog-app-active.toolbar-fixed {
  --catalog-toolbar-offset: 40px;
}

body.catalog-app-active.toolbar-fixed.toolbar-tray-open.toolbar-vertical {
  --catalog-toolbar-offset: 79px;
}

/* -- Destroy Olivero layout -- */
body.path-node .layout-container,
body.path-node main,
body.path-node .region-content,
body.path-node .block-system-main-block,
.page-node-type-page .layout--pass--content-medium,
.page-node-type-page .region--content,
.page-node-type-page #block-catalog-theme-content,
.page-node-type-page article.node,
.page-node-type-page .node__content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.region.region-content {
  padding: 0 !important;
}

/* -- Catalog container -- */
#catalog-app {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--catalog-toolbar-offset, 0px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--white);
}

body.catalog-app-active #catalog-app {
  position: relative;
  width: 100%;
  min-height: calc(100dvh - var(--catalog-toolbar-offset, 0px));
  margin-left: 0;
}

/* -- Swiper fullscreen -- */
.catalog-swiper {
  flex: 1;
  min-height: 0;
  width: 100%;
}

.swiper-wrapper,
.swiper-slide {
  width: 100%;
}

.swiper-slide {
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
  background: var(--white);
}

/* -- Category slide base -- */
.category-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.category-slide .slide-content__body {
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 40px;
}

.category-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--overlay-gradient, linear-gradient(270deg, var(--overlay-10, rgba(12, 35, 59, 0.10)) 0%, var(--primary-950, #0C233B) 100%));
  pointer-events: none;
  z-index: 1;
}


/* -- Slide header (inside every slide) -- */
.slide-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 32px;
  width: 100%;
  position: relative;
  z-index: 10;
  background: var(--white);
}

.slide-header .catalog-logo img {
  height: 40px;
  width: auto;
}

.slide-header .catalog-info-btn:hover {
  background: #007baf;
}


/* ======================================================
   SLIDE CONTENT SYSTEM
   ====================================================== */

.slide-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100dvh - var(--catalog-toolbar-offset, 0px));
}

.slide-content__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.slide-content--product .slide-content__body,
.slide-content--form .slide-content__body {
  justify-content: flex-start;
}

/* -- Slide footer (inside every slide) -- */
.slide-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 32px 14px;
  font-family: var(--font-family);
  font-size: var(--text-sm);
  color: var(--secondary-100);
  font-weight: var(--fw-book);
  width: 100%;
}

.slide-footer a {
  color: var(--secondary-100);
  text-decoration: none;
  margin-left: 32px;
  transition: color 0.2s;
}

.slide-footer a:hover {
  color: var(--primary-500);
  text-decoration: underline;
}


@media (max-width: 768px) {
  .slide-footer {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    padding: 10px 18px 14px;
    text-align: center;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
  }

  .slide-footer > span {
    width: 100%;
    text-align: center;
  }

  .slide-footer > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
  }

  .slide-footer a {
    margin-left: 0;
    white-space: nowrap;
  }
}