/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* BASIC */

.container-full-width.homepage-latest-contribution {
    display: none !important;
}

/* =========================================================
   HERO / CAROUSEL
========================================================= */
.carousel-wrapper{
  background-color: #f1e8df;
}

/* split layout */
.hp-split{
  max-width: 1400px;
  margin: 0 auto;
  padding: 60px 40px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;
  gap: 60px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.hp-split__item{ -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.hp-split__img{
  width: 100%;
  height: auto;
  display: block;
}

/* wrapper kvůli ořezu při zoomu */
.hp-split__zoom{
  display: block;
  width: 100%;
  overflow: hidden;
}

/* RIGHT layout */
.hp-split__right{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hp-split__item.hp-split__right img{
  max-height: 680px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

a.hp-split__media{
  margin-bottom: 60px;
  width: 100%;
  display: block;
}

/* --- SEKVENCE ANIMACÍ (CSS only) --- */
.hp-split__left .hp-split__img,
.hp-split__right .hp-split__img{
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  will-change: transform;
  -webkit-animation-duration: 32s;
          animation-duration: 32s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.hp-split__left .hp-split__img{ -webkit-animation-name: hpZoomPanLeft; animation-name: hpZoomPanLeft; }

@-webkit-keyframes hpZoomPanLeft{
  0%   { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  25%  { -webkit-transform: scale(1.35) translateY(-6%); transform: scale(1.35) translateY(-6%); }
  50%  { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
}

@keyframes hpZoomPanLeft{
  0%   { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  25%  { -webkit-transform: scale(1.35) translateY(-6%); transform: scale(1.35) translateY(-6%); }
  50%  { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
}

.hp-split__right .hp-split__img{ -webkit-animation-name: hpZoomPanRight; animation-name: hpZoomPanRight; }

@-webkit-keyframes hpZoomPanRight{
  0%   { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  50%  { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  75%  { -webkit-transform: scale(1.25) translateY(-5%); transform: scale(1.25) translateY(-5%); }
  100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
}

@keyframes hpZoomPanRight{
  0%   { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  50%  { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
  75%  { -webkit-transform: scale(1.25) translateY(-5%); transform: scale(1.25) translateY(-5%); }
  100% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); }
}

/* === SHOPtET Carousel: fade (opacity) místo slide === */

/* doporucuju omezit selektor na konkrétní carousel wrapper,
   ať to nezasáhne jiné karusely na webu.
   Když nevíš wrapper, nech jen ".carousel-inner". */

.carousel-inner {
  position: relative;
}

/* všechny slidy naskládat na sebe */
.carousel-inner > .item {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;

  /* délku animace můžeš změnit */
  -webkit-transition: opacity 600ms ease;
  -o-transition: opacity 600ms ease;
  transition: opacity 600ms ease;

  /* brutálně vypnout horizontální posuny */
  left: 0 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

/* aktivní slide je vidět */
.carousel-inner > .item.active {
  position: relative; /* aby carousel měl výšku podle aktivního slidu */
  opacity: 1;
  z-index: 2;
}

/* bootstrap-like stavy během přechodu */
.carousel-inner > .item.next,
.carousel-inner > .item.prev {
  position: absolute;
  inset: 0;
  opacity: 1;      /* nový slide „nadjede“ přes opacity */
  z-index: 3;

  left: 0 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

/* starý slide mizí */
.carousel-inner > .item.active.left,
.carousel-inner > .item.active.right {
  opacity: 0;
  z-index: 2;

  left: 0 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

/* nový slide se ustálí */
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right {
  opacity: 1;
}

/* když by ShopTET/Bootstrap někde používal transform translate3d, tak pryč */
.carousel-inner > .item,
.carousel-inner > .item * {
  will-change: opacity;
}

/* =========================
   HERO text box (původní)
   ========================= */

 @media (min-width: 769px) {
   .hero-text-box {
    margin-top: 90px;
    padding-bottom: 180px !important;
  }
}

.hero-text-box{
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 0;
  -webkit-transition: margin-bottom 1.6s cubic-bezier(.16,1,.3,1) .4s;
  -o-transition: margin-bottom 1.6s cubic-bezier(.16,1,.3,1) .4s;
  transition: margin-bottom 1.6s cubic-bezier(.16,1,.3,1) .4s;
}

.hero-text-box h1{
  font-size: var(--step-6);
  font-weight: 200 !important;
  max-width: 1115px;
  margin-top: 0 !important;
}

.hero-content{
  margin-top: 40px;
}

.hero-text-box p{
  font-family: big-caslon-fb, serif !important;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step-2);
}

p.hero-claim{
  -ms-flex-item-align: end;
      align-self: flex-end;
  font-size: var(--step-3);
}


/* =========================
   REVEAL (animace + shimmer)
   ========================= */

/* tvoje uložené CSS (beze změn) */
.hero-reveal{
  display: none;
  margin-top: 22px;

  display: none; /* záměrně dvakrát – kvůli přepisům */
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  font-family: big-caslon-fb, serif !important;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step-0);
}

.hero-reveal .plus{
  line-height: 1;
  font-size: calc(var(--step-0) + 2px);
  -webkit-transform: translateY(2px);
      -ms-transform: translateY(2px);
          transform: translateY(2px);
}

/* Vracející: zobraz tlačítko */
.hero-text-box.is-returning .hero-reveal{
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
}

/* TEXT: připravíme na animaci (výchozí stav je normální, animace se aktivuje jen když je returning) */
.hero-content{
  position: relative;
}

/* Vracející: sbaleno + neviditelné (bez display:none, aby šla animace) */
.hero-text-box.is-returning .hero-content{
  max-height: 0 !important;
  overflow: hidden !important;

  opacity: 0 !important;
  -webkit-transform: translateY(6px) !important;
      -ms-transform: translateY(6px) !important;
          transform: translateY(6px) !important;

  -webkit-transition:
    max-height 2.6s cubic-bezier(.16,1,.3,1),
    opacity 1.9s cubic-bezier(.16,1,.3,1) .25s,
    -webkit-transform 2.2s cubic-bezier(.16,1,.3,1);

  transition:
    max-height 2.6s cubic-bezier(.16,1,.3,1),
    opacity 1.9s cubic-bezier(.16,1,.3,1) .25s,
    -webkit-transform 2.2s cubic-bezier(.16,1,.3,1);

  -o-transition:
    max-height 2.6s cubic-bezier(.16,1,.3,1),
    opacity 1.9s cubic-bezier(.16,1,.3,1) .25s,
    transform 2.2s cubic-bezier(.16,1,.3,1);

  transition:
    max-height 2.6s cubic-bezier(.16,1,.3,1),
    opacity 1.9s cubic-bezier(.16,1,.3,1) .25s,
    transform 2.2s cubic-bezier(.16,1,.3,1);

  transition:
    max-height 2.6s cubic-bezier(.16,1,.3,1),
    opacity 1.9s cubic-bezier(.16,1,.3,1) .25s,
    transform 2.2s cubic-bezier(.16,1,.3,1),
    -webkit-transform 2.2s cubic-bezier(.16,1,.3,1);

  will-change: opacity, transform, max-height;
}

/* Odhalené: otevřené */
.hero-text-box.is-revealed .hero-content{
  max-height: 1400px !important;
  opacity: 1 !important;
  -webkit-transform: translateY(0) !important;
      -ms-transform: translateY(0) !important;
          transform: translateY(0) !important;
}

/* Shimmer “záblesk” – jen při odhalení */
.hero-text-box.is-shimmer .hero-content::after{
  content: "";
  position: absolute;
  top: -12%;
  left: -45%;
  width: 60%;
  height: 130%;

  background: -o-linear-gradient(
    330deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 75%
  );

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 75%
  );

  -webkit-transform: skewX(-12deg);

      -ms-transform: skewX(-12deg);

          transform: skewX(-12deg);
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-filter: blur(.6px);
          filter: blur(.6px);

  -webkit-animation: perlinaShimmer 1.6s cubic-bezier(.16,1,.3,1) 1;

          animation: perlinaShimmer 1.6s cubic-bezier(.16,1,.3,1) 1;
}

@-webkit-keyframes perlinaShimmer{
  from { -webkit-transform: translateX(0) skewX(-12deg); transform: translateX(0) skewX(-12deg); opacity: 0; }
  18% { opacity: 1; }
  to { -webkit-transform: translateX(230%) skewX(-12deg); transform: translateX(230%) skewX(-12deg); opacity: 0; }
}

@keyframes perlinaShimmer{
  from { -webkit-transform: translateX(0) skewX(-12deg); transform: translateX(0) skewX(-12deg); opacity: 0; }
  18% { opacity: 1; }
  to { -webkit-transform: translateX(230%) skewX(-12deg); transform: translateX(230%) skewX(-12deg); opacity: 0; }
}

/* Jemný focus (doporučeno) */
.hero-reveal:focus{ outline: none; }
.hero-reveal:focus-visible{
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 6px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-text-box.is-returning .hero-content{
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
  .hero-text-box.is-shimmer .hero-content::after{
    -webkit-animation: none;
            animation: none;
    display: none;
  }
}
/* =========================
   Paragraph spacing reveal
   ========================= */

/* výchozí stav (nový návštěvník i vracející – zavřeno) */
.hero-text-box p{
  margin-bottom: 0;
  -webkit-transition: margin-bottom 1.8s cubic-bezier(.16,1,.3,1);
  -o-transition: margin-bottom 1.8s cubic-bezier(.16,1,.3,1);
  transition: margin-bottom 1.8s cubic-bezier(.16,1,.3,1);
}

/* otevření: plynulé nadechnutí prostoru */
.hero-text-box.is-revealed p{
  margin-bottom: 40px;
}

/* Banner vedle carousel */
.next-to-carousel-banners{ display: block; }
.banner-wrapper{ background-color: #fff; }
/* HERO ARROW SLIDER */

.carousel-control{
  z-index: 999 !important;
}
.carousel-control.left::before,
.carousel-control.right::before{
  content: "" !important;          
  display: inline-block;
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 36px 36px;
  border: none !important;
  -webkit-transition: all 0.6s ease;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease; 
}
.carousel-control.left:hover::before,
.carousel-control.right:hover::before{
  width: 43px;
  height: 43px;
  background-size: 43px 43px;
}

/* levá */
.carousel-control.left::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23fff' d='m4.296 12l8.492-8.727a.75.75 0 1 0-1.075-1.046l-9 9.25a.75.75 0 0 0 0 1.046l9 9.25a.75.75 0 1 0 1.075-1.046z'/></svg>");
}

/* pravá = otočíme stejnou šipku */
.carousel-control.right::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path fill='%23fff' d='m4.296 12l8.492-8.727a.75.75 0 1 0-1.075-1.046l-9 9.25a.75.75 0 0 0 0 1.046l9 9.25a.75.75 0 1 0 1.075-1.046z'/></svg>");
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* =========================================================
   MAIN BENEFITS
========================================================= */

  .per-badges{
    color: var(--per-ink);
    width: 100%;
    padding-top: 20px;

  }

  /* Track: desktop bez scrollu, mobil se scrollem */
.per-badges__track{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:start;
      -ms-flex-align:start;
          align-items:flex-start;
  gap: clamp(18px, 3vw, 64px);

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;

  -ms-flex-wrap: nowrap;

      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;

  -ms-scroll-snap-type: x mandatory;

      scroll-snap-type: x mandatory;
  -ms-touch-action: pan-x;
      touch-action: pan-x; /* důležité pro trackpad/touch */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;  
}

.per-badge{
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;                   
  scroll-snap-align: center;
  justify-items: center;
  text-align: center;
  min-width: 296px;
}

  .per-badge__icon{
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 999px;
    display:-ms-grid;
    display:grid;
    place-items:center;
    /* „kolečka“ jako na obrázku */
  }

  .per-badge__icon img{
    width: 22px;
    height: 22px;
    display:block;
    /* pokud SVG podporuje currentColor, přebarví se */
  }

  .per-badge__title{
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 14px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 8px;
  }

  .per-badge__sub{
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
    line-height: 1.35;
  }
@media (max-width: 980px) {
  .per-badges__track {
      gap: 10px !important;
  }
}

@media (max-width: 768px){
  .per-badges__track.is-autoplaying{
    -ms-scroll-snap-type: none !important;
        scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important; /* klíčové pro iOS */
    scroll-behavior: auto !important;
  }
}
  /* Mobil: horizontální scroll + snap + hezké okraje */
  @media (max-width: 768px){
    .per-badges__track{
      -webkit-box-pack:start;
          -ms-flex-pack:start;
              justify-content:flex-start;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      -ms-scroll-snap-type: x mandatory;
          scroll-snap-type: x mandatory;
      padding: 6px 14px;
      gap: 18px;
    }
    .per-badge{
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      scroll-snap-align: center;
    }
    /* jemné schování scrollbarů */
    .per-badges__track{
      scrollbar-width: none;
    }
    .per-badges__track::-webkit-scrollbar{
      display:none;
    }
    .per-badges__track .per-badge:first-child { margin-left: 0px;}
    .per-badges__track {
        gap: 0px !important;
    }
    .per-badge {
      min-width: 260px;
    }
  }

  /* Velká šířka: víc vzduchu jako na screenshotu */
  @media (min-width: 1100px){
    .per-badges__track{
      gap: 20px;
    }
  }
    @media (min-width: 1600px){
    .per-badges__track{
      gap: 60px;
    }
        .per-badges__track .per-badge:first-child { margin-left: 60px;}
  }

/* =========================================================
   BESTSELLERS
========================================================= */
div#products-1, div#products-2 {
    width: 100% !important;
}
.bestsellers__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.bestsellers__heading h3{ margin: 0 0 10px; }
.bestsellers__heading h2{ margin: 0; margin-bottom: 10px; }

button.product-slider-navigation.navigation-next, button.product-slider-navigation.navigation-prev {
    bottom: -13px !important;
    top: unset !important;
    border: 1px solid #281809;
    border-radius: 50px !important;
}
.product-slider-holder .product-slider-navigation.navigation-next:before, .product-slider-holder .product-slider-navigation.navigation-prev:before {
    font-size: 9px !important;
    color: #281809 !important;
    left: -2px;
    top: -2px;
    position: relative;
}
button.product-slider-navigation.navigation-prev {
    right: 90px !important;
    left: unset !important;
}
button.product-slider-navigation.navigation-next {
    right: 36px !important;
}
.products-wrapper.product-slider-holder.has-navigation {
    margin-bottom: 40px;
}


.product-slider-holder .product-slider-pagination .pagination-button {
margin: 0 !important;
}

 
.product-slider-holder .product-slider-navigation {
    height: 28px;
    width: 28px;
}
.product-slider-navigation:before {
    font-size: 9px !important;
    position: relative;
    left: -2px;
    top: -2px;
}
.product-slider .widget-parameter-wrapper{
    display: none;
}
.product-slider-pagination button {
    margin: 0 !important;
}
.products-wrapper.product-slider-holder.has-navigation {
    margin-bottom: 40px;
}
.flag {
    margin-left: 0;
}
@media (max-width: 980px) {
    .products-block {
        padding-bottom: 40px !important;
    }
    button.product-slider-navigation {
        bottom: -36px !important;
    }
}
@media (max-width: 767px) {
    .product-slider-holder .product-slider-pagination {
        display: none !important;
    }
    .products-block {
        padding-bottom: 0px !important;
    }
}
.products-block .product .prices .widget-parameter-wrapper.justified {
    display: none;
}
@media (max-width: 520px) {
  .bestsellers__inner a.cs-btn {
      width: 110px;
      gap: 0 !important;
      font-size: 12px;
      line-height: 11px;
  }
}
/* ======================================================
   INFO BENEFIT BAR 
====================================================== */
.info-bar {
  background: #281809;
  overflow: hidden;
  width: 100%;
  padding: 16px 0;
  margin-top: 90px;
}

.info-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: scroll-left 30s linear infinite;
          animation: scroll-left 30s linear infinite;
}

.info-track span {
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 80px;
  text-transform: uppercase;
}

@-webkit-keyframes scroll-left {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes scroll-left {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@media (min-width: 768px) {
  .info-bar {
      margin-top: 40px;
  }
}
/* =========================================================
   PRODUCTS LIST / GRID
========================================================= */

.products-block .prices{
  min-width: 60px;
  margin-left: 10px;
  text-align: end;
}
.products-block a.name{ text-align: left; }

.products-block a.image img{
  -o-object-fit: cover;
     object-fit: cover;
  height: auto;
  aspect-ratio: 3 / 4;
  position: relative;
  display: block;
}



/* ======================================================
   BENEFITS BAR
====================================================== */
@media (min-width: 1440px) {
    .homepage-banners-full-width .banner-wrapper>span {
        max-width: 100% !important;
    }
}




/* ======================================================
   HERO – RESPONSIVE (max-width: 900px)
====================================================== */
@media (max-width: 900px){
  .hp-split{
    padding: 40px 0px;
    gap: 30px;
  }
}
@media (max-width: 768px){
  .hp-split{
    gap: 10px;
  }
}
/* Respect pro reduced motion */
@media (prefers-reduced-motion: reduce){
  .hp-split__left .hp-split__img,
  .hp-split__right .hp-split__img{
    -webkit-animation: none;
            animation: none;
  }
}




/* ======================================================
   SIGNATURE 
====================================================== */
.homepage-group-title.homepage-products-heading-1.h4 {
    font-family: big-caslon-fb, serif;
    font-size: var(--step-4);
    font-weight: 300;
    text-align: left;
    margin-left: 30px;
}
.homepage-group-title.homepage-products-heading-2.h4{
  display: none;
}
@media (max-width: 768px) {
  .homepage-group-title.homepage-products-heading-1.h4 {
      margin-left: 5px;
  }
}


/* ======================================================
   COLLECTIONS 
====================================================== */
.collections { background: #f1e8df; }

.collections h2 {
  margin-bottom: 60px;
  text-align: left;
}

.collections h2 em {
  font-style: italic;
  font-weight: 400;
}

.collections-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 60px 1fr 60px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.collection-card {
  text-align: center;
  text-decoration: none;
  color: #281809;
}

.collection-image { overflow: hidden; }

.collection-image img {
  width: 100%;
  max-width: 340px;
  display: block;
  -webkit-transition: -webkit-transform 0.6s ease, -webkit-filter 0.6s ease;
  transition: -webkit-transform 0.6s ease, -webkit-filter 0.6s ease;
  -o-transition: transform 0.6s ease, filter 0.6s ease;
  transition: transform 0.6s ease, filter 0.6s ease;
  transition: transform 0.6s ease, filter 0.6s ease, -webkit-transform 0.6s ease, -webkit-filter 0.6s ease;
}

.collection-card h3 {
  margin-top: 24px;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.4s ease, -webkit-transform 0.4s ease;
  -o-transition: transform 0.4s ease, opacity 0.4s ease;
  transition: transform 0.4s ease, opacity 0.4s ease;
  transition: transform 0.4s ease, opacity 0.4s ease, -webkit-transform 0.4s ease;
}

.collection-card:hover img {
  -webkit-transform: scale(1.04);
      -ms-transform: scale(1.04);
          transform: scale(1.04);
  -webkit-filter: brightness(0.95);
          filter: brightness(0.95);
}

.collection-card:hover h3 {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
  opacity: 0.85;
}

.banner-wrapper span:first-child {
  padding: 0;
}
@media (max-width: 980px) {
    .collections-grid {
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .collections-grid {
        gap: 10px;
    }
    .collection-image img {
        min-height: 170px;
        -o-object-fit: cover;
           object-fit: cover;
    }
}
/* ======================================================
   PERLININ RUKOPIS 
====================================================== */
.perlinin-rukopis{ background: #fff; }

.perlinin-rukopis h2{
  margin: 0 0 28px;
  font-family: "commuters-sans", sans-serif !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #3a2414;
  text-align: left;
  font-size: var(--step-7);
  line-height: 42px;
}


.perlinin-text p{
  max-width: 1020px;
  margin: 0 auto;
  font-family: big-caslon-fb, serif !important;
  font-size: var(--step-2) !important;
  line-height: 1.4;
  color: #2b1a12;
  text-align: center;
}

.perlinin-text p + p{ margin-top: 28px; }

.perlinin-gallery{
  max-width: 700px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 48px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 90px;
}

.perlinin-gallery img{
  width: 100%;
  height: auto;
  display: block;
  max-height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: 768px){
  .perlinin-gallery{
    gap: 30px;
  }
  .perlinin-gallery img {
    max-width: 300px;
  }
}


/* ======================================================
   PRIBEH 
====================================================== */
.pribeh-content { text-align: end; }

.perlinin-pribeh{
  background: #c9bfb5;
}

.pribeh-wrap{
  max-width: 1200px;
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 80px 1.4fr;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media (min-width: 901px){
  .pribeh-left img {margin-bottom: 150px !important; }
}
.pribeh-left img { max-width: 150px;}
.pribeh-right img { max-width: 400px; }

.pribeh-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 550px;
  margin: 0 auto;
  padding-top: 60px;
}

.pribeh-text h4{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center;font-size: var(--step-4) !important; line-height: 32px; text-align: left;}

.pribeh-text p {
  line-height: 1.6;
  max-width: 340px;
  text-align: left;
}

.pribeh-link{
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.pribeh-link:hover{ -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

@media (max-width: 900px){
  .pribeh-wrap{
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .pribeh-left img{ width: 190px !important; }
  .pribeh-right img {
    max-width: 300px;
  }
}
@media (max-width: 520px){
  .pribeh-text {
    -webkit-box-align: center !important;
        -ms-flex-align: center !important;
            align-items: center !important;
  }
  .pribeh-text h4 {
    margin-left: 10px;
  }
  .pribeh-text p {
    padding-left: 25px !important;
  }
  .pribeh-right img {
        max-width: 250px !important;
  }
    .pribeh-left img {
      width: 150px !important;
  }
}


/* ======================================================
   PERLINA BY MILI 
====================================================== */
.perlina-by-mili{
  background: #f1e8df;
  text-align: center;
}

.pbm-title {
  margin: 0 0 40px;
  font-weight: 600;
  font-family: 'commuters-sans';
}

.pbm-claim{
  margin: 0 0 15px;
  text-transform: uppercase;
}

.pbm-design{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
  max-width: 281px;
  margin: 0 auto 15px;
}

.pbm-design img {
  height: 48px;
  width: auto !important;
  margin: 0 !important;
}

.pbm-meta{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
}

.pbm-line{
  width: 120px;
  height: 1px;
  background: #3a2414;
}

@media (max-width: 600px){
  .pbm-signature{ height: 40px; }
  .pbm-line{ width: 80px; }
}

/* ======================================================
   NSTA FEED (welcome section)
====================================================== */

.welcome-wrapper .welcome {
    width: 100% !important;
    padding: 0 !important;
}
    .custom-insta-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; /* Nezalamovat - drží je v jedné řadě */
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; 
        -webkit-box-pack: start; 
            -ms-flex-pack: start; 
                justify-content: flex-start;
        gap: 0;
        padding: 0;
        width: 100%;
        max-width: 100% !important;
        margin: 0 auto;
        overflow-x: auto; 
        -ms-scroll-snap-type: x mandatory; 
            scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
        scrollbar-width: none !important;  
        -ms-overflow-style: none !important;
    }
    /* Scrollbar pro Chrome/Safari */
    .custom-insta-wrapper::-webkit-scrollbar {
        display: none !important;
    }

    /* POLOŽKY (ČTVERCE) */
    .insta-item {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 18%;
                flex: 0 0 18%; 
        min-width: 180px; 
        aspect-ratio: 1 / 1;
        position: relative;
        overflow: hidden;
        background: #f0f0f0;
        scroll-snap-align: start;
        border-radius: 0px !important;
        display: block;
    }

    /* FOTKY A VIDEA UVNITŘ */
    .insta-media {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover; /* Vyplní celý čtverec (ořízne přebytky) */
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    /* MOBILNÍ VERZE */
    @media (max-width: 768px) {
        .insta-item {
            /* Na mobilu chceme větší, aby byly hezky vidět */
            -webkit-box-flex: 0;
                -ms-flex: 0 0 70%;
                    flex: 0 0 70%; /* Fotka zabere 70% šířky displeje (bude vidět kousek další) */
            aspect-ratio: 1 / 1; /* Stále čtverec */
        }
    }