.vsd-widget-container .e-frontend-copy .vsd-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.vsd-7652 .vsd-element.vsd-element-d0db2e5{--display:flex;--min-height:665px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:5em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;}.vsd-widget-html .e-frontend-copy .vsd-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.vsd-7652 .vsd-element.vsd-element-632e8ae{width:var( --container-widget-width, 1250px );max-width:1250px;--container-widget-width:1250px;--container-widget-flex-grow:0;}.vsd-7652 .vsd-element.vsd-element-632e8ae.vsd-element{--align-self:center;}@media(min-width:768px){.vsd-7652 .vsd-element.vsd-element-d0db2e5{--width:100%;}}@media(max-width:1024px){.vsd-7652 .vsd-element.vsd-element-d0db2e5{--margin-top:2em;--margin-bottom:0em;--margin-left:0em;--margin-right:0em;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.vsd-7652 .vsd-element.vsd-element-d0db2e5{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .vsd-element-632e8ae */.wedding-story {
  /*
    Това са ЕДИНСТВЕНИТЕ височини, които трябва да пипаш.
    Няма height:100%, което да колабира до тънка линия.
  */
  --ws-height: 760px;
  --ws-min-height: 620px;

  width: 100%;
  height: var(--ws-height);
  min-height: var(--ws-min-height);

  padding: clamp(6px, .7vw, 11px);

  overflow: hidden;

  background: #fff;

  box-sizing: border-box;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.wedding-story,
.wedding-story *,
.wedding-story *::before,
.wedding-story *::after {
  box-sizing: border-box;
}

.wedding-story button {
  appearance: none !important;
  -webkit-appearance: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0;
  outline: 0;

  background: none;

  color: inherit;

  font: inherit;

  box-shadow: none !important;

  -webkit-tap-highlight-color: transparent;
}


/* OUTER */

.ws-shell {
  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  padding: clamp(5px, .55vw, 9px);

  overflow: hidden;

  border-radius: clamp(22px, 2vw, 34px);

  background: #f3f1ed;
}


/* STAGE */

.ws-stage {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border-radius: clamp(18px, 1.7vw, 29px);

  background: #d7d3cc;

  isolation: isolate;

  cursor: grab;
  touch-action: pan-y;
}

.ws-stage.is-dragging {
  cursor: grabbing;
}

.ws-track,
.ws-slide {
  position: absolute;
  inset: 0;
}


/* SLIDES */

.ws-slide {
  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  transform: scale(1.018);

  transition:
    opacity .55s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1),
    visibility .55s;
}

.ws-slide.is-active {
  z-index: 2;

  opacity: 1;
  visibility: visible;

  transform: scale(1);
}

.ws-slide > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  pointer-events: none;
  user-select: none;
}

.ws-slide:not(.ws-slide--collection)::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(8,8,6,.40) 0%,
      rgba(8,8,6,.05) 28%,
      transparent 50%,
      rgba(8,8,6,.08) 62%,
      rgba(8,8,6,.60) 100%
    );

  pointer-events: none;
}


/* TOP */

.ws-topbar {
  position: absolute;
  z-index: 20;

  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    clamp(17px, 2vw, 29px)
    clamp(19px, 2.3vw, 36px);

  color: #fff;

  pointer-events: none;
}

.ws-topbar strong {
  font: 400 clamp(20px, 1.7vw, 29px)/1 Georgia, serif;

  letter-spacing: -.025em;

  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.ws-count {
  display: flex;
  align-items: center;

  gap: 8px;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .08em;

  font-variant-numeric: tabular-nums;

  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.ws-count i {
  width: 20px;
  height: 1px;

  background: currentColor;

  opacity: .55;
}


/* TITLE */

.ws-context {
  position: absolute;
  z-index: 20;

  left: clamp(19px, 2.4vw, 38px);
  bottom: clamp(88px, 11vh, 122px);

  max-width: min(780px, 70%);

  display: flex;
  align-items: flex-end;

  gap: 14px;

  color: #fff;
}

.ws-context h2 {
  margin: 0;

  font: 400 clamp(31px, 4vw, 62px)/.98 Georgia, serif;

  letter-spacing: -.04em;

  text-shadow: 0 3px 24px rgba(0,0,0,.40);
}


/* INFO BUTTON */

.wedding-story .ws-info-trigger {
  flex: 0 0 40px;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  display: grid !important;
  place-items: center !important;

  margin-bottom: 3px !important;

  border: 1px solid rgba(255,255,255,.48) !important;
  border-radius: 999px !important;

  background: rgba(18,18,16,.24) !important;

  color: #fff !important;

  backdrop-filter: blur(15px);

  cursor: pointer;

  transition: .2s ease;
}

.ws-info-trigger span {
  font: italic 17px/1 Georgia, serif;
}

.wedding-story .ws-info-trigger:hover {
  background: rgba(255,255,255,.24) !important;

  border-color: rgba(255,255,255,.85) !important;

  color: #fff !important;

  transform: scale(1.06);
}

.ws-info-trigger.is-hidden {
  display: none !important;
}


/* INFO CARD */

.ws-info-card {
  position: absolute;
  z-index: 40;

  left: clamp(19px, 2.4vw, 38px);
  bottom: clamp(88px, 11vh, 122px);

  width: min(390px, calc(100% - 38px));

  padding: 22px 54px 22px 22px;

  border: 1px solid rgba(255,255,255,.44);
  border-radius: 20px;

  background: rgba(250,249,246,.97);

  color: #171714;

  box-shadow: 0 20px 70px rgba(0,0,0,.18);

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px) scale(.98);

  transition: .2s ease;
}

.ws-info-card.is-open {
  opacity: 1;
  visibility: visible;

  transform: none;
}

.ws-info-card p {
  margin: 0;

  font: 400 17px/1.5 Georgia, serif;

  color: #292720;
}


/* CLOSE */

.wedding-story .ws-info-close {
  position: absolute;

  top: 11px;
  right: 11px;

  width: 36px !important;
  height: 36px !important;

  min-width: 36px !important;
  min-height: 36px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 999px !important;

  background: rgba(23,23,20,.06) !important;

  color: #171714 !important;

  cursor: pointer;
}

.ws-info-close svg {
  width: 15px;
  height: 15px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}


/* ARROWS */

.wedding-story .ws-arrow {
  position: absolute;
  z-index: 25;

  top: 50%;

  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  min-height: 48px !important;

  display: grid !important;
  place-items: center !important;

  border: 1px solid rgba(255,255,255,.34) !important;
  border-radius: 999px !important;

  background: rgba(18,18,16,.22) !important;

  color: #fff !important;

  backdrop-filter: blur(16px);

  transform: translateY(-50%);

  cursor: pointer;

  transition: .2s ease;
}

.ws-arrow--prev {
  left: clamp(14px, 1.8vw, 26px);
}

.ws-arrow--next {
  right: clamp(14px, 1.8vw, 26px);
}

.ws-arrow svg {
  width: 18px;
  height: 18px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.6;

  stroke-linecap: round;
  stroke-linejoin: round;
}

.wedding-story .ws-arrow:hover,
.wedding-story .ws-arrow:focus,
.wedding-story .ws-arrow:active {
  background: rgba(255,255,255,.25) !important;

  border-color: rgba(255,255,255,.66) !important;

  color: #fff !important;
}


/* BOTTOM */

.ws-bottom {
  position: absolute;
  z-index: 25;

  left: clamp(14px, 2vw, 26px);
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(12px, 1.8vw, 23px);
}

.ws-progress {
  width: 100%;
  height: 1px;

  margin-bottom: 10px;

  overflow: hidden;

  background: rgba(255,255,255,.30);
}

.ws-progress span {
  display: block;

  width: 0;
  height: 100%;

  background: #fff;

  transition: width .3s ease;
}


/* THUMBNAILS */

.ws-thumbs {
  display: flex;
  align-items: center;

  gap: 6px;

  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;
}

.ws-thumbs::-webkit-scrollbar {
  display: none;
}

.wedding-story .ws-thumb {
  position: relative;

  flex: 0 0 clamp(58px, 5.2vw, 80px);

  aspect-ratio: 1.35;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 9px !important;

  background: transparent !important;

  opacity: .54;

  cursor: pointer;

  transform: scale(.96);

  transition: .2s ease;
}

.ws-thumb > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.wedding-story .ws-thumb:hover {
  opacity: .84;

  transform: scale(1);

  background: transparent !important;
}

.wedding-story .ws-thumb.is-active {
  opacity: 1;

  transform: scale(1);

  border-color: rgba(255,255,255,.96) !important;
}


/* COLLECTION THUMB = PHOTO + ICON */

.ws-thumb--collection {
  isolation: isolate;
}

.ws-thumb--collection::after {
  content: "";

  position: absolute;
  inset: 0;
  z-index: 1;

  background: rgba(10,10,8,.26);

  transition: .2s ease;
}

.ws-thumb__collection-icon {
  position: absolute;
  z-index: 2;

  top: 50%;
  left: 50%;

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.62);
  border-radius: 999px;

  background: rgba(12,12,10,.24);

  transform: translate(-50%, -50%);

  backdrop-filter: blur(8px);
}

.ws-thumb__collection-icon svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke: #fff;
  stroke-width: 1.4;
}

.ws-thumb--collection:hover::after,
.ws-thumb--collection.is-active::after {
  background: rgba(10,10,8,.10);
}


/* COLLECTION */

.ws-slide--collection {
  background: #f4f2ee;

  color: #171714;
}

.ws-collection {
  position: absolute;

  inset:
    clamp(68px, 8vh, 94px)
    clamp(17px, 3vw, 52px)
    clamp(80px, 10vh, 106px);

  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-rows: auto minmax(0, 1fr);

  gap: 14px;

  overflow: hidden;
}

.ws-collection__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;

  gap: 20px;
}

.ws-collection__head h3 {
  margin: 0;

  font: 400 clamp(28px, 3vw, 46px)/1 Georgia, serif;

  letter-spacing: -.035em;
}

.ws-collection__head span {
  color: rgba(23,23,20,.56);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: .08em;
}


/* MOSAIC */

.ws-mosaic {
  min-width: 0;
  min-height: 0;

  display: grid;

  grid-template-columns: repeat(12, minmax(0,1fr));
  grid-template-rows: repeat(6, minmax(0,1fr));

  gap: clamp(5px, .55vw, 9px);

  overflow: hidden;
}

.wedding-story .ws-mosaic__item {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border-radius: clamp(11px, 1vw, 17px) !important;

  background: #ddd9d2 !important;

  cursor: pointer;
}

.ws-mosaic__item--a {
  grid-column: 1 / 6;
  grid-row: 1 / 7;
}

.ws-mosaic__item--b {
  grid-column: 6 / 9;
  grid-row: 1 / 4;
}

.ws-mosaic__item--c {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
}

.ws-mosaic__item--d {
  grid-column: 9 / 13;
  grid-row: 3 / 5;
}

.ws-mosaic__item--e {
  grid-column: 6 / 9;
  grid-row: 4 / 7;
}

.ws-mosaic__item--f {
  grid-column: 9 / 13;
  grid-row: 5 / 7;
}

.ws-mosaic__item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform .45s cubic-bezier(.2,.7,.2,1);
}

.ws-mosaic__item:hover img {
  transform: scale(1.035);
}


/* COLLECTION MODE */

.ws-stage.is-collection .ws-topbar {
  color: #171714;
}

.ws-stage.is-collection .ws-topbar strong,
.ws-stage.is-collection .ws-count {
  text-shadow: none;
}

.ws-stage.is-collection .ws-context,
.ws-stage.is-collection .ws-info-card {
  display: none;
}

.ws-stage.is-collection .ws-progress {
  background: rgba(23,23,20,.14);
}

.ws-stage.is-collection .ws-progress span {
  background: #171714;
}

.ws-stage.is-collection .ws-thumb {
  border-color: rgba(23,23,20,.16) !important;
}

.ws-stage.is-collection .ws-thumb.is-active {
  border-color: rgba(23,23,20,.76) !important;
}

.wedding-story .ws-stage.is-collection .ws-arrow {
  background: rgba(255,255,255,.82) !important;

  border-color: rgba(23,23,20,.12) !important;

  color: #171714 !important;
}

.wedding-story .ws-stage.is-collection .ws-arrow:hover {
  background: #fff !important;

  color: #171714 !important;
}


/* MOBILE */

@media (max-width: 700px) {
  .wedding-story {
    --ws-height: 680px;
    --ws-min-height: 580px;

    padding: 4px;
  }

  .ws-shell {
    padding: 4px;
  }

  .ws-context {
    left: 17px;
    right: 17px;

    bottom: 94px;

    max-width: calc(100% - 34px);
  }

  .ws-context h2 {
    font-size: clamp(29px, 10vw, 43px);
  }

  .ws-collection {
    inset: 66px 10px 78px;

    gap: 9px;
  }

  .ws-collection__head h3 {
    font-size: 29px;
  }

  .ws-mosaic {
    grid-template-columns: repeat(6, minmax(0,1fr));
    grid-template-rows: repeat(8, minmax(0,1fr));

    gap: 4px;
  }

  .ws-mosaic__item--a {
    grid-column: 1 / 5;
    grid-row: 1 / 5;
  }

  .ws-mosaic__item--b {
    grid-column: 5 / 7;
    grid-row: 1 / 3;
  }

  .ws-mosaic__item--c {
    grid-column: 5 / 7;
    grid-row: 3 / 5;
  }

  .ws-mosaic__item--d {
    grid-column: 1 / 3;
    grid-row: 5 / 9;
  }

  .ws-mosaic__item--e {
    grid-column: 3 / 5;
    grid-row: 5 / 9;
  }

  .ws-mosaic__item--f {
    grid-column: 5 / 7;
    grid-row: 5 / 9;
  }
}/* End custom CSS */