<section class="c-product">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída B"><use xlink:href="#energy-label--a"></use></svg>
                    </li>
                    <li>
                    <svg width="43" height="24" viewBox="0 0 43 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="c-product__energy-label c-product__energy-label--second e-energy-label e-energy-label--A-E-B" aria-labelledby="label-A-E-A"
            area-hidden="true">
                        <title id="label-A-E-A">Energetický štítek B</title>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H31L43 12L31 24H0V0Z" class="e-energy-label__background"></path>
                        <rect width="8" height="22" transform="matrix(-1 0 0 1 9 1)" fill="white"></rect>
                        <text class="e-energy-label__value"><tspan x="16.0234" y="16.492">B</tspan></text>
                        <text class="e-energy-label__range"><tspan x="2.42041" y="9.1995">A</tspan></text>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.35153 9.98621C5.2811 9.91504 5.18513 9.875 5.085 9.875C4.98487 9.875 4.8889 9.91504 4.81847 9.98621L3.23347 11.5877C3.08778 11.7349 3.08901 11.9723 3.23621 12.118C3.38341 12.2637 3.62085 12.2625 3.76653 12.1153L4.65039 11.2222L4.65039 13.525C4.65039 13.7321 4.81828 13.9 5.02539 13.9C5.2325 13.9 5.40039 13.7321 5.40039 13.525V11.1018L6.40347 12.1153C6.54915 12.2625 6.78659 12.2637 6.93379 12.118C7.08099 11.9723 7.08222 11.7349 6.93653 11.5877L5.35153 9.98621Z" fill="black"></path>
                        <text class="e-energy-label__range"><tspan x="2.13037" y="21.1995">E</tspan></text>
                    </svg>
                    </li>
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--serp">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__link" href="#category">Notebooky</a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída C"><use xlink:href="#energy-label--c"></use></svg>
                    </li>
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--single-shop">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
                <a href="#detail" class="c-product__cta c-product__cta@lteLine e-button e-button--simple">Detail produktu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle is-active">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Odebrat z porovnání</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--single-shop-with-variants">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cumundeametreprehenderitexpeditaculpareiciendisdoloribusiste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Vybrat variantu (5)</a>
                <a href="#detail" class="c-product__cta c-product__cta@lteLine e-button e-button--simple">Vybrat variantu (5)</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--offer">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__params">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída F"><use xlink:href="#energy-label--f"></use></svg>
                    </li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#exit" class="c-product__cta e-button">Do obchodu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--productad">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                    <li class="e-badge e-badge--ad">Hit</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__stats c-pipe-list is-available">
                    <li class="c-pipe-list__item">
                        <a class="c-product__rating c-product__link" href="#review">
                            <div class="c-rating-widget u-color-highlight">
                                <span class="c-rating-widget__value">93 %</span>
                                <svg class="c-rating-widget__stars c-rating" aria-hidden="true">
                                    <g clip-path="url(#clips-rating)">
                                        <rect class="c-rating__backdrop" width="100%" height="100%"></rect>
                                        <rect class="c-rating__value" width="93%" height="100%"></rect>
                                    </g>
                                </svg>
                            </div>
                        </a>
                    </li>
                    <li class="c-pipe-list__item">
                        <a class="c-product__review-count c-product__link" href="#review">5 recenzí</a>
                    </li>
                </ul>
                <ul class="c-product__params c-simple-list">
                    <li class="c-simple-list__item" title="Úhlopříčka displeje">15.6 palce</li>
                    <li class="c-simple-list__item" title="Rozlišení displeje">1920 x 1080</li>
                    <li class="c-simple-list__item" title="Procesor">AMD A6</li>
                    <li class="c-simple-list__item" title="Frekvence procesoru">3 GHz</li>
                    <li class="c-simple-list__item" title="Velikost operační paměti">8 GB</li>
                    <li class="c-simple-list__item" title="Druh grafické karty">Integrovaná karta</li>
                </ul>
                <p class="c-product__desc o-line-wrap">
                    Dostupný notebook pro každodenní běžné požadavky na práci i zábavu. Dvoujádrový procesor AMD A6-9225 (2.6GHz, TB 3GHz); 8GB operační paměti DDR4; 15.6" Full HD displej; grafika; quas impedit, natus laudantium, cum unde amet reprehenderit expedita culpa reiciendis doloribus iste.
                </p>
            </div>
            <div class="c-product__actions o-block-list">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <a href="#detail" class="c-product__cta e-button">Porovnat ceny</a>
                <p class="c-product__sponsored">Sponzorováno</p>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--compact o-line-wrap o-line-wrap--short u-center">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
                <ul class="c-product__params">
                    <li>
                        <svg class="c-product__energy-label" aria-label="Energetická třída B"><use xlink:href="#energy-label--a"></use></svg>
                    </li>
                    <li>
                    <svg width="43" height="24" viewBox="0 0 43 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="c-product__energy-label c-product__energy-label--second e-energy-label e-energy-label--A-E-B" aria-labelledby="label-A-E-A"
            area-hidden="true">
                        <title id="label-A-E-A">Energetický štítek B</title>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H31L43 12L31 24H0V0Z" class="e-energy-label__background"></path>
                        <rect width="8" height="22" transform="matrix(-1 0 0 1 9 1)" fill="white"></rect>
                        <text class="e-energy-label__value"><tspan x="16.0234" y="16.492">B</tspan></text>
                        <text class="e-energy-label__range"><tspan x="2.42041" y="9.1995">A</tspan></text>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.35153 9.98621C5.2811 9.91504 5.18513 9.875 5.085 9.875C4.98487 9.875 4.8889 9.91504 4.81847 9.98621L3.23347 11.5877C3.08778 11.7349 3.08901 11.9723 3.23621 12.118C3.38341 12.2637 3.62085 12.2625 3.76653 12.1153L4.65039 11.2222L4.65039 13.525C4.65039 13.7321 4.81828 13.9 5.02539 13.9C5.2325 13.9 5.40039 13.7321 5.40039 13.525V11.1018L6.40347 12.1153C6.54915 12.2625 6.78659 12.2637 6.93379 12.118C7.08099 11.9723 7.08222 11.7349 6.93653 11.5877L5.35153 9.98621Z" fill="black"></path>
                        <text class="e-energy-label__range"><tspan x="2.13037" y="21.1995">E</tspan></text>
                    </svg>
                    </li>
                </ul>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--compact c-product--single-shop o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Detail produktu</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle is-active">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Odebrat z porovnání</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--compact c-product--single-shop-with-variants o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
                <a href="#detail" class="c-product__secondary-cta c-product__link">Vybrat variantu (5)</a>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--compact c-product--offer o-line-wrap o-line-wrap--short u-center">
    <a href="#exit" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#exit">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#exit">v MALL.cz</a>
                </div>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#exit" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>

<section class="c-product c-product--compact c-product--productad o-line-wrap o-line-wrap--short u-center">
    <a href="#detail" class="c-product__image-link">
        <img src="styleguide/img/product/thumb.jpg" class="c-product__image" loading="lazy" role="presentation">
    </a>
    <div class="c-product__container">
        <div class="c-product__info">
            <div class="c-product__content">
                <ul class="c-product__badges is-available">
                    <li class="e-badge e-badge--top">Top 9</li>
                    <li class="e-badge e-badge--ad">Hit</li>
                </ul>
                <h3 class="c-product__title">
                    <a class="c-product__link" href="#detail">Lenovo IdeaPad S145 81N300ALCK</a>
                </h3>
            </div>
            <div class="c-product__actions">
                <div class="c-product__offers o-block-list o-block-list--snug">
                    <a class="c-product__price" href="#detail">10&nbsp;333 – 14&nbsp;352&nbsp;Kč</a>
                    <a class="c-product__shops c-product__link" href="#detail">v 17 obchodech</a>
                </div>
                <p class="c-product__sponsored">Sponzorováno</p>
            </div>
        </div>
        <ul class="c-product__additional-actions">
            <li class="c-product__compare">
                <button type="button" class="e-action e-action--subtle">
                    <svg class="e-icon u-gamma" aria-hidden="true"><use xlink:href="#compare"></use></svg>
                    <span>Porovnat</span>
                </button>
            </li>
        </ul>
    </div>
    <a href="#detail" class="c-product__overlay-link">Lenovo IdeaPad S145 81N300ALCK</a>
</section>