Products listing section

Grid products listing

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Skladem
( 52265 Ks )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Na dotaz
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Doprava zdarma Nízká cena Výprodej

Papírová taška hnědá Takeaway 26x16x30

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Nedostupné
( Zpět 24.5. )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Skladem
( 52265 Ks )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Na dotaz
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Nedostupné
( Zpět 24.5. )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Skladem
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

30%

Limitovaná edice Novinka Akce

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Vlastní potisk

100

ks

Min. 100 ks

Skladem
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Načíst více tašek

Předchozí
1 2 3 ... 6
Další

        {% include "@Components/sections/products-listing-section/products-listing-section.twig" with {props: {
  products: products_sample,
  pagination: {
      button: {
      title: "Načíst více tašek",
      url: "https://www.google.com/",
    },
    steps: {
      prev: {
        title: "Předchozí",
        url: "#prev"
      },
      next: {
        title: "Další",
        url: "#next"
      },
      items: [
        {
          title: "1",
          url: "#1"
        },
        {
          title: "2",
          active: true
        },
        {
          title: "3",
          url: "#3"
        },
        {
          title: "...",
          blank: true,
        },
        {
          title: "6",
          url: "#6"
        }
      ]
    }
  }
}} %}

          

<section class="base-section  s-products-list">
  <div class="base-section__container container">
        <div class="row gx-2 gy-2 mt-0 pt-5 pb-7">
            <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 52265 Ks )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="2">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-secondary-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --default  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Na dotaz
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="2">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="2">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="2" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="2" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="3">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Papírová taška hnědá Takeaway 26x16x30">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Papírová taška hnědá Takeaway 26x16x30" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Doprava zdarma</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Nízká cena</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-primary-400 --sm    i-product__tag">
      <span class="i-tag__title">Výprodej</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Papírová taška hnědá Takeaway 26x16x30">
      <span class="link__title">Papírová taška hnědá Takeaway 26x16x30</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button    i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="3">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="3">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="3" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="3" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 52265 Ks )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --default  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Na dotaz
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
                <div class="justify-content-center col-md-6 col-xl-4 col-xxl-3">
        <article class="i-product u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 h-100  --vertical mx-auto" data-product-id="1">
  <div class="i-product__body d-flex flex-column gap-2 p-2 h-100">
    <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
      <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                  <div class="img u-posr overflow-hidden --cover  --ratio-1-1 i-product__image-full">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="308" height="308" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
              </a>

              <div class="i-discount d-flex flex-column justify-content-center align-items-center  i-product__discount u-posa u-top-0 u-right-0 my-1 me-1">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
      
                <div class="g-tags d-flex flex-wrap gap-1 i-product__tags u-posa u-top-0 u-left-0 mt-1 ms-1 align-items-start flex-column">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
          </figure>

    <div class="i-product__header d-flex flex-column">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
    </div>

    <div class="i-product__content mt-auto --js-pricelist-controler">
      <div class="row gx-0 mb-2">

                  <div class="i-pricelist u-fz-xs i-product__pricelist col-12 mb-2">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
        
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>

      <div class="d-flex flex-row gap-2 justify-content-between flex-grow-1 align-items-center flex-wrap">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>
    <div class="i-product__buttons d-flex gap-2 justify-content-between">
      <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

        <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
    </div>
  </div>
</article>
      </div>
      
</div>

          
<div class="c-listing-navigation row gx-0">
    <div class="col-xl-4 offset-xl-4 text-center px-xl-2">
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline          js-fetch" href='https://www.google.com/'>
      <span class="btn__title u-z-index-1">
      Načíst více tašek
    </span>
      
  
  </a>
  </div>

  <div class="col-xl-4 d-flex justify-content-center justify-content-xl-end align-content-center pt-3 pt-xl-0">
    <div class="c-pagination d-flex align-items-center flex-wrap justify-content-center justify-content-xxl-end --compact">
      <a class="link d-inline-flex u-fw-600 align-items-center  --icon-before    c-pagination__link --prev" href="#prev" title="Předchozí" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">Předchozí</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>      </span>
    </span>
  
  </a>
  
  <div class="c-pagination__items d-flex gap-1 align-items-center">
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#1" title="1" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">1</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      --active  c-pagination__link --page-number justify-content-center" href="#" title="2" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">2</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#3" title="3" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">3</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      --blank c-pagination__link --page-number justify-content-center" href="#" title="..." data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">...</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#6" title="6" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">6</span>
  
  
  </a>
      </div>


      <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --next" href="#next" title="Další" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">Další</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>      </span>
    </span>
  
  </a>
  </div>
  </div>
</div>
        </div>
</section>

Inline products listing

Preview

Twig

Html

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Skladem
( 52265 Ks )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Akce

Na dotaz
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Papírová taška hnědá Takeaway 26x16x30

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

Doprava zdarma Nízká cena Výprodej

Nedostupné
( Zpět 24.5. )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Skladem
( 52265 Ks )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Na dotaz
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Nedostupné
( Zpět 24.5. )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Skladem
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)

Min. 100 ks. 2,75Kč

Od 1 000 ks. 2,65Kč

Od 3 000 ks. 2,50Kč

Od 5 000 ks. 2,40Kč

Od 10 000 ks. 2,00Kč

30%

Limitovaná edice Novinka Akce

Skladem
( 0 )

1 ks 1 990 Kč

Celkem: 1 990 Kč bez DPH

Vlastní potisk

100

ks

Min. 100 ks

Načíst více tašek

Předchozí
1 2 3 ... 6
Další

        {% include "@Components/sections/products-listing-section/products-listing-section.twig" with {props: {
  products: products_sample,
  variant: "inline",
  pagination: {
      button: {
      title: "Načíst více tašek",
      url: "https://www.google.com/",
    },
    steps: {
      prev: {
        title: "Předchozí",
        url: "#prev"
      },
      next: {
        title: "Další",
        url: "#next"
      },
      items: [
        {
          title: "1",
          url: "#1"
        },
        {
          title: "2",
          active: true
        },
        {
          title: "3",
          url: "#3"
        },
        {
          title: "...",
          blank: true,
        },
        {
          title: "6",
          url: "#6"
        }
      ]
    }
  }
}} %}

          

<section class="base-section  s-products-list">
  <div class="base-section__container container">
        <div class="d-flex flex-column gap-2 pt-5 pb-7">
            <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 52265 Ks )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="2">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-secondary-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --default  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Na dotaz
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="2">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="2">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="2" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="2" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="3">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Papírová taška hnědá Takeaway 26x16x30">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Papírová taška hnědá Takeaway 26x16x30" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Papírová taška hnědá Takeaway 26x16x30">
      <span class="link__title">Papírová taška hnědá Takeaway 26x16x30</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Doprava zdarma</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Nízká cena</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-primary-400 --sm    i-product__tag">
      <span class="i-tag__title">Výprodej</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button    i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="3">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="3">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="3" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="3" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 52265 Ks )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --default  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-text-500">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --text --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M9.05 5h-2.1V3h2.1v2ZM6 6v2.099h.95v2.8H6V13h.95v.002h2.1v-.002H10v-2.1h-.95V6H6Z" clip-rule="evenodd"/></svg>      </span>

    Na dotaz
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --unavailable  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-danger">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.495 8.002 3.203 4.746l1.478-1.5 3.32 3.272 3.317-3.272 1.478 1.5-3.292 3.256 3.292 3.246-1.494 1.507L8 9.489l-3.303 3.266-1.494-1.507 3.292-3.246Z" clip-rule="evenodd"/></svg>      </span>

    Nedostupné
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( Zpět 24.5. )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
                <article class="i-product --inline u-container-inline u-posr u-border u-border--tertiary-500 u-rounded-3 row mx-0 mt-0 gy-2 pb-2 --js-pricelist-controler  --vertical" data-product-id="1">
  <div class="col-xl-5 d-flex flex-wrap justify-content-center">
    <div class="col-md-4 d-flex align-items-center">
      <figure class="i-product__image d-block u-posr overflow-hidden u-img-hover">
        <a href="#" class="i-product__image-link d-flex align-items-center" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
                      <div class="img u-posr overflow-hidden --cover  --ratio-1-1">
  <picture>
    
    <img src="" data-src="https://placehold.co/308x308" alt="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)" width="172" height="172" draggable="false" srcset="" data-srcset="https://placehold.co/308x308 1x, https://placehold.co/618x618/?paper-bag 2x">
  </picture>
</div>
                  </a>
      </figure>
    </div>

    <div class="i-product__content col-md-8 d-flex flex-column gap-1 p-1">
      <h2 class="i-product__title u-fz-md u-fw-700">
        <a class="link d-inline-flex u-fw-600 align-items-center      i-product__link u-fz-md u-clamp" href="#" title="Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)">
      <span class="link__title">Goodrem Delta: I Honestly Love You (Limited Coloured Transpare)</span>
  
  
  </a>
      </h2>
              <div class="i-pricelist u-fz-xs i-product__pricelist">
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                --active --first
                
              "
         data-price="2.75"
         data-min-count="100"
         data-index="0"
    >
              <span>Min. 100 ks.</span>
      
              <span>2,75Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.65"
         data-min-count="1000"
         data-index="1"
    >
              <span>Od 1 000 ks.</span>
      
              <span>2,65Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.5"
         data-min-count="3000"
         data-index="2"
    >
              <span>Od 3 000 ks.</span>
      
              <span>2,50Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                
              "
         data-price="2.4"
         data-min-count="5000"
         data-index="3"
    >
              <span>Od 5 000 ks.</span>
      
              <span>2,40Kč</span>
          </div>
      <div class="
                i-pricelist__selector d-flex justify-content-between px-1 u-cursor-pointer
                
                --last
              "
         data-price="2"
         data-min-count="10000"
         data-index="4"
    >
              <span>Od 10 000 ks.</span>
      
              <span>2,00Kč</span>
          </div>
  </div>
          </div>
  </div>

  <div class="col-xl-7 d-flex flex-column flex-lg-row gap-2 gap-lg-4">
    <div class="d-flex flex-column gap-2 justify-content-between flex-wrap w-100 w-lg-50 p-1">

      <div class="d-flex align-items-top gap-1">
                  <div class="i-discount d-flex flex-column justify-content-center align-items-center --lg i-product__discount">
  <div class="i-discount__value u-fw-700 u-fz-sm">30%</div>
</div>
        
                    <div class="g-tags d-flex flex-wrap gap-1 align-items-start">
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-blue-400 --sm    i-product__tag">
      <span class="i-tag__title">Limitovaná edice</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-pink-400 --sm    i-product__tag">
      <span class="i-tag__title">Novinka</span>
    </span>
          
<span class="i-tag d-inline-flex align-items-center text-center justify-content-center gap-1 u-fw-500  --color-support-violet-400 --sm    i-product__tag">
      <span class="i-tag__title">Akce</span>
    </span>
      </div>
              </div>
      <div class="d-flex align-items-center justify-content-between  w-100 gap-2">
                  <div class="i-availability u-fz-sm d-flex flex-column --available  i-product__availability">  
  <div class="i-availability__title d-flex align-items-center u-fw-700 u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>      </span>

    Skladem
  </div>
  <span class="i-availability__quantity flex-shrink-0 u-color-tertiary-600 u-fz-xs u-color-text-400">
          ( 0 )
      </span>

  </div>
        
                  <div class="d-flex justify-content-end flex-column align-items-end">
            <div class="i-price p-1 d-flex flex-column justify-content-center flex-shrink-0 u-bg-primary-400 i-product__price">
        <div class="i-price__row i-price__main d-flex justify-content-end align-items-end gap-1">

      
              <span class="i-price__title u-fz-md u-fw-700">1 ks</span>
      
      <span class="i-price__main u-fw-700">
        <span class="--js-product-item-price">
          1 990
        </span>
                  Kč              </span>
    </div>
  
  </div>
            <span class="u-fw-500 u-fz-sm d-inline text-end">Celkem:
              <span class="--js-product-total-price">1 990</span>
              Kč
              bez DPH
            </span>
          </div>
              </div>
    </div>

    <div class="w-100 w-lg-50 p-1 d-flex flex-column justify-content-between">
      <div class="row gx-0 mb-2">
        <div class="col-6 d-flex i-product__print-checkbox-wrapper">
          <label class="f-checkbox d-inline-flex gap-1 u-posr  align-items-center  --checkbox   i-product__print-checkbox --js-product-item-checkbox u-fw-600">
  <input class="f-checkbox__input u-posa" type="checkbox">
  <span class="f-checkbox__visual flex-shrink-0 d-flex align-items-center justify-content-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="#fff" d="M12.522 4 14 5.5 7.901 11.51a2.107 2.107 0 0 1-2.972-.005L2 8.664l1.467-1.513 2.94 2.85L12.522 4Z"/></svg>  </span>
  <div class="f-checkbox__body d-flex column-gap-1 align-items-center">
    <span class="f-checkbox__title">
                        Vlastní potisk
              
          </span>

    
      </div>

  <span class="f-error u-fz-sm gap-1 d-none">
  <span class="f-error__icon d-flex align-items-center justify-content-center">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --danger --sm">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24v112c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zm-32 224a32 32 0 1 1 64 0 32 32 0 1 1-64 0z"/></svg>      </span>
  </span>

  <span class="f-error__title"></span>
</span>

</label>
        </div>
        <div class="col-6 i-product__print-counter-wrapper">
          
<div class="c-counter u-fw-700 u-fz-14 u-bg-white u-posr d-flex align-items-center justify-content-between p-1 flex-shrink-0 u-border u-border--tertiary-500  product-quantity --js-product-counter">

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --minus u-color-conversion">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="#B0B2D4" fill-rule="evenodd" d="M4 12a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <div class="c-counter__value-visual d-flex">
    <div class="c-counter__value" contenteditable="true">100</div>
          <div class="c-counter__units">ks</div>
              <div class="c-counter__label u-posa u-top-0 u-left-50-p u-fz-xs px-1 u-bg-white text-nowrap">Min. 100 ks</div>
      </div>

  <div class="c-counter__button d-flex align-items-center justify-content-center u-posr --plus">
      
  <span class="icon d-flex align-items-center justify-content-center --colored --conversion">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.975 6.975V3h2.05v3.975H13v2.05H9.025V13h-2.05V9.025H3v-2.05h3.975Z" clip-rule="evenodd"/></svg>      </span>
  </div>

  <input class="c-counter__input d-none" type="number" name="product-quantity" value="100" min="100" max="50000">
</div>
        </div>
      </div>
      <div class="i-product__buttons d-flex gap-2 justify-content-between">
        <div class="i-add-wishlist-button --wishlisted   i-product__wishlist flex-shrink-0">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__add js-wishlist-add" type="button" aria-label="Přidat do wishlistu" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971ZM12 19.879C9.29 17.82 3.67 12.764 3.67 8.97c-.118-2.216 1.57-4.142 3.749-4.277 2.178.135 3.866 2.06 3.748 4.277h1.666c-.118-2.216 1.57-4.142 3.748-4.277 2.18.135 3.867 2.06 3.749 4.277 0 3.795-5.62 8.85-8.33 10.908Z"/></svg>      </span>
    </span>
  
  </button>

  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline --sm    --icon-only     i-add-wishlist-button__remove js-wishlist-remove" type="button" data-product-id="1">
  
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center  --lg">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M16.581 3A5.325 5.325 0 0 0 12 5.795 5.325 5.325 0 0 0 7.419 3c-3.093.137-5.532 2.826-5.415 5.97 0 5.739 9.126 12.366 9.514 12.647l.482.347.482-.347c.388-.28 9.514-6.908 9.514-12.646.117-3.145-2.322-5.834-5.415-5.971Z"/></svg>      </span>
    </span>
  
  </button>
</div>

          <div class="i-add-cart-buttons u-posr text-center flex-grow-1  flex-grow-1 i-product__cart-add">
  <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__cart-add js-cart-add --shown u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Přidat do košíku" data-product-id="1" data-modal-target="add-product-to-cart-modal">
      <span class="btn__title u-z-index-1">
      Přidat do košíku
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white --sm">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C5.718 0 3.807 1.58 3.416 3.667H.782V13.99c0 1.116.948 2.01 2.097 2.01H13.12c1.148 0 2.096-.894 2.096-2.01V3.667h-2.633C12.193 1.58 10.28 0 8 0Zm0 1.575c1.386 0 2.55.89 2.91 2.092H5.09C5.45 2.465 6.614 1.575 8 1.575ZM2.415 13.99V5.242h11.17v8.748c0 .232-.2.435-.464.435H2.879a.451.451 0 0 1-.464-.435Zm2.56-7.266H3.343v.787c0 2.864 2.14 5.066 4.657 5.066 2.526 0 4.657-2.213 4.657-5.066v-.787h-1.633v.787c0 1.948-1.378 3.491-3.024 3.491-1.646 0-3.025-1.543-3.025-3.491v-.787Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>

      <button class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --primary --sm         flex-grow-1 i-product__cart-add i-add-cart-button__print js-print-add --hidden u-posa u-top-50-p u-left-50-p u-translate-middle" type="button" aria-label="Chci vlastní potisk" data-product-id="1" data-modal-target="product-print-modal">
      <span class="btn__title u-z-index-1">
      Chci vlastní potisk
    </span>
      
      <span class="btn__icon d-flex align-items-center justify-content-center">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --white">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M6 19.572H3.92a2.419 2.419 0 0 1-2.42-2.418v-6.737A2.418 2.418 0 0 1 3.918 8H6V1.5h12V8h2.082a2.418 2.418 0 0 1 2.418 2.417v6.737a2.418 2.418 0 0 1-2.418 2.418H18V22.5H6v-2.928Zm12-1.538h2.082a.88.88 0 0 0 .88-.88v-6.737a.88.88 0 0 0-.881-.88H3.919a.88.88 0 0 0-.88.88v6.737c0 .486.394.88.88.88H6v-2.496H4.59V14h14.82v1.538H18v2.496ZM7.537 8h8.926V3.039l-8.926-.001V8ZM15 11h4v1.539h-4V11Zm-7.463 4.538v5.424h8.926v-5.424H7.537Z" clip-rule="evenodd"/></svg>      </span>
    </span>
  
  </button>
  
  
  <div class="i-add-cart-button__animation u-posa u-top-50-p u-left-50-p u-translate-middle btn --primary u-posa --icon-only --js-product-button-animation --sm">
    <svg width="26" height="12" viewbox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M3 6C4.65685 6 6 7.34315 6 9C6 10.6569 4.65685 12 3 12C1.34315 12 0 10.6569 0 9C0 7.34315 1.34315 6 3 6Z" fill="currentColor"/>
      <path d="M13 6C14.6569 6 16 7.34315 16 9C16 10.6569 14.6569 12 13 12C11.3431 12 10 10.6569 10 9C10 7.34315 11.3431 6 13 6Z" fill="currentColor"/>
      <path d="M23 6C24.6569 6 26 7.34315 26 9C26 10.6569 24.6569 12 23 12C21.3431 12 20 10.6569 20 9C20 7.34315 21.3431 6 23 6Z" fill="currentColor"/>
    </svg>
  </div>
</div>
      </div>
    </div>
  </div>

</article>
      
</div>

          
<div class="c-listing-navigation row gx-0">
    <div class="col-xl-4 offset-xl-4 text-center px-xl-2">
    <a class="btn u-posr u-cursor-pointer d-inline-flex gap-1 align-items-center justify-content-center flex-nowrap flex-shrink-0 --outline          js-fetch" href='https://www.google.com/'>
      <span class="btn__title u-z-index-1">
      Načíst více tašek
    </span>
      
  
  </a>
  </div>

  <div class="col-xl-4 d-flex justify-content-center justify-content-xl-end align-content-center pt-3 pt-xl-0">
    <div class="c-pagination d-flex align-items-center flex-wrap justify-content-center justify-content-xxl-end --compact">
      <a class="link d-inline-flex u-fw-600 align-items-center  --icon-before    c-pagination__link --prev" href="#prev" title="Předchozí" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">Předchozí</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>      </span>
    </span>
  
  </a>
  
  <div class="c-pagination__items d-flex gap-1 align-items-center">
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#1" title="1" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">1</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      --active  c-pagination__link --page-number justify-content-center" href="#" title="2" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">2</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#3" title="3" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">3</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      --blank c-pagination__link --page-number justify-content-center" href="#" title="..." data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">...</span>
  
  
  </a>
          <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --page-number justify-content-center" href="#6" title="6" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">6</span>
  
  
  </a>
      </div>


      <a class="link d-inline-flex u-fw-600 align-items-center      c-pagination__link --next" href="#next" title="Další" data-page="" data-loading-target="" data-scroll-target="">
      <span class="link__title">Další</span>
  
      <span class="link__icon d-flex align-items-center justify-content-center flex-shrink-0">
        
  <span class="icon d-flex align-items-center justify-content-center --colored --text --xs">
          <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>      </span>
    </span>
  
  </a>
  </div>
  </div>
</div>
        </div>
</section>