{% block component_product_box %}
{% if product %}
{% set name = product.translated.name %}
{% set id = product.id %}
{% set cover = product.cover.media %}
{% set variation = product.variation %}
{% set displayParent = product.variantListingConfig.displayParent and product.parentId === null %}
{% set bulletpoint1 = product.customFields.ev_produktdaten_bulletpoint1 %}
{% set bulletpoint2 = product.customFields.ev_produktdaten_bulletpoint2 %}
{% set bulletpoint3 = product.customFields.ev_produktdaten_bulletpoint3 %}
{% set bulletpoint4 = product.customFields.ev_produktdaten_bulletpoint4 %}
{% set disableCompare = product.customFields.custom_emova_category_removecompare %}
{% set producttype = product.customFields.ev_produktdaten_produkttyp %}
{% set gesamtleistung = product.customFields.ev_wallboxdaten_gesamtleistung %}
{% set modulleistung = product.customFields.ev_wallboxdaten_modulleistung %}
{% set anzmodule = product.customFields.ev_wallboxdaten_anzmodule %}
{% set ev_wallbox_kw = product.customFields.ev_wallboxdaten_chargingPowersWatt %}
{% set ev_wallbox_stecker = product.customFields.ev_wallboxdaten_chargingConnectorTypes %}
{% set ev_wallbox_app = product.customFields.ev_wallboxdaten_smartphoneControllable %}
{% set ev_wallboxdaten_anwendungsbereich = product.customFields.ev_wallboxdaten_anwendungsereich %}
<div class="productItem card product-box box-{{ layout }}" style="border:none !important; border-color: transparent !important; background-color: transparent !important;">
{% block component_product_box_content %}
{% block component_product_box_image %}
{# fallback if display mode is not set #}
{% set displayMode = displayMode ?: 'standard' %}
{# set display mode 'cover' for box-image with standard display mode #}
{% if layout == 'image' and displayMode == 'standard' %}
{% set displayMode = 'cover' %}
{% endif %}
{% set ev_category = page.header.navigation.active.customFields.custom_emova_category_maintype %}
{% if not ev_category %}
{% set ev_category = product.customFields.custom_emova_category_maintype %}
{% endif %}
{% block component_product_box_image_link %}
<div class="container-box-image" onclick="openDetails(event, '{{ seoUrl('frontend.detail.page', { 'productId': id }) }}')" style="cursor:pointer;">
<div id="imageContainer_{{id}}" class="col-12 p-0 main-image-container" style=" position: relative; text-align: center; color: white;">
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
{% if ev_category =="energy" %}
<div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
{% elseif ev_category == "heat" %}
<div class="container-box-image" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%);"></div>
{% elseif ev_category == "lubricant" %}
<div class="container-box-image" style="background: radial-gradient(circle at top right, #883569 53%, #AE773D 90%);"></div>
{% elseif ev_category == "consulting" %}
<div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
{% elseif ev_category == "mobility" %}
<div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
{% elseif ev_category == "emobility" %}
<div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
{% else %}
<div class="container-box-image" style="background: radial-gradient(circle at bottom right, #364CA4 53%, #5F8E89 90%);"></div>
{% endif %}
</a>
{% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}" style="opacity: .9; width:100%; margin:0 auto;">
{% else %}
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}" title="{{ name }}" class="product-image-link is-{{ displayMode }}" style="opacity: .9; width:50%; margin:0 auto;">
{% endif %}
{% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
<div>
{% else %}
<div style="width: 50%; height: 75%; position: absolute; margin-bottom:75%;">
{% endif %}
{% block component_product_box_image_link_inner %}
{% if cover.url %}
{% if 'picfullblack' in producttype or 'picfullwhite' in producttype %}
{% set attributes = {
'class': 'box-img',
'alt': (cover.translated.alt ?: name),
'title': (cover.translated.title ?: name)
} %}
{% else %}
{% set attributes = {
'class': 'box-img',
'alt': (cover.translated.alt ?: name),
'title': (cover.translated.title ?: name)
} %}
{% endif %}
{% if displayMode == 'cover' or displayMode == 'contain' %}
{% set attributes = attributes|merge({ 'data-object-fit': displayMode }) %}
{% endif %}
{% block component_product_box_image_thumbnail %}
{% sw_thumbnails 'product-image-thumbnails' with {
media: cover,
sizes: sizes
} %}
{% endblock %}
{% else %}
{% block component_product_box_image_placeholder %}
<div class="product-image-placeholder">
{% sw_icon 'placeholder' style {
'size': 'fluid'
} %}
</div>
{% endblock %}
{% endif %}
{% endblock %}
</div>
</a>
<div style="position: absolute; bottom:0; margin-left:25px;">
<div class="horizontal-lignment f-size-14" style="padding: 10px;">
{% if 'picfullblack' in producttype %}
<div style="margin-right: 10px; text-align: end; color:black">PRODUKT
<br>
INFO
</div>
{% else %}
<div style="margin-right: 10px; text-align: end;">PRODUKT
<br>
INFO
</div>
{% endif %}
<div
id="shortDetailsArrowRight_{{id}}" class="details-btn details-btn-arrow" title="{{ name }}" class="product-image-link is-{{ displayMode }}">
{# <svg id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="black" class="bi bi-arrow-right-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
</svg> #}
{% if 'picfullblack' in producttype %}
<svg class="details-btn-arrow" id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 50 50">
<g fill="none" stroke="black" stroke-width="1.5">
<circle cx="25" cy="25" r="25" stroke="none"/>
<circle cx="25" cy="25" r="24.25" fill="none"/>
</g>
<g>
<g>
<path fill="black" d="m30.222 17 5.945 5.353-1.137 1.263-5.946-5.353z"></path>
</g>
<path fill="black" d="M12.667 24.961H37.29v1.373l-7.293 6.483-1.1-1.185 5.578-5.007H12.669Z"></path>
</g>
</svg>
{% else %}
<svg class="details-btn-arrow" id="svgDetails_{{id}}" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewbox="0 0 50 50">
<g fill="none" stroke="white" stroke-width="1.5">
<circle cx="25" cy="25" r="25" stroke="none"/>
<circle cx="25" cy="25" r="24.25" fill="none"/>
</g>
<g>
<g>
<path fill="white" d="m30.222 17 5.945 5.353-1.137 1.263-5.946-5.353z"></path>
</g>
<path fill="white" d="M12.667 24.961H37.29v1.373l-7.293 6.483-1.1-1.185 5.578-5.007H12.669Z"></path>
</g>
</svg>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<script>
function openDetails(event, url){
if (event.target.classList.contains('details-btn-arrow') || event.target.closest('.details-btn-arrow')) {
} else {
window.location.href = url;
}
}
</script>
{% endblock %}
{% endblock %}
<div id="descriptionDetailsContent_{{id}}" class="description-details-content" style="height: 335px; width: 100%; overflow-y: auto; display: none; background-color: #EBECECFD; padding: 10px 25px;">
<p>{{ product.translated.description|raw }}</p>
<style>
/* width */
::-webkit-scrollbar {
width: 3px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #246FDC;
border-radius: 10px;
}
</style>
</div>
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
<div style="background-color: white; margin-top: 3px; padding: 10px 25px !important; color:black;">
<h2 class="top-mid almarenaDisplayRegular" style="color:black;font-size=32px;">{{name}}</h2>
</div>
</a>
{% if 'solar' in producttype and ev_wallboxdaten_anwendungsbereich is not null %}
<div style="background-color: white; margin-top: 3px; padding: 25px; display:grid;grid-template-columns: 30px 1fr;align-items: center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" style="width: 100%">
<path d="M23.4 18.9h1.3v17.2h-1.3zM23.4 12h1.3v3.7h-1.3z" fill="#141412"></path><path d="M4.2 35.2C2.3 31.8 1.3 27.9 1.3 24 1.3 11.5 11.5 1.3 24 1.3S46.7 11.5 46.7 24 36.5 46.7 24 46.7c-5.7 0-11.2-2.1-15.4-6l-.9.9C12.2 45.7 17.9 48 24 48c13.2 0 24-10.8 24-24S37.2 0 24 0 0 10.8 0 24c0 4.2 1.1 8.2 3.1 11.8l1.1-.6z" fill="#141412"></path></svg>
<div style="display:flex; margin-left:10px; line-height:20px; height: 60px; flex-direction: column;justify-content: center">
<span style="color: black;font-size: 15px; font-weight:bold">Anwendungsbereiche</span>
<span style="color: black;font-size: 15px;">
{% if ev_wallboxdaten_anwendungsbereich is not null %}
{{ev_wallboxdaten_anwendungsbereich|join(', ')}}
{% endif %}
</span>
</div>
</div>
{% endif %}
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
<div style="background-color: white; margin-top: 3px; padding: 25px 25px !important; margin-bottom:3px">
<div
style="border-left: 1px solid black; text-align: start; display: table;">
{# {% if bulletpoints is not empty %}
{{bulletpoints|raw}}
{% endif %} #}
{% if bulletpoint1 is not empty or bulletpoint2 is not empty or
bulletpoint3 is not empty or bulletpoint4 is not empty %}
<ul class="almarenaRegular" style="padding-left: 25px; font-size:15px; display: table-cell; color:black;">
{% if bulletpoint1 is not empty %}
<li>{{bulletpoint1}}</li>
{% endif %}
{% if bulletpoint2 is not empty %}
<li>{{bulletpoint2}}</li>
{% endif %}
{% if bulletpoint3 is not empty %}
<li>{{bulletpoint3}}</li>
{% endif %}
{% if bulletpoint4 is not empty %}
<li>{{bulletpoint4}}</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</a>
{% set showMainTechBlock = false %}
{% if 'solar' in producttype %}
{% if gesamtleistung is not null or modulleistung is not null or anzmodule is not null %}
{% set showMainTechBlock = true %}
{% endif %}
{% endif %}
{% if 'wallbox' in producttype %}
{% if ev_wallbox_kw is not null or ev_wallbox_stecker is not null or ev_wallbox_app is not null %}
{% set showMainTechBlock = true %}
{% endif %}
{% endif %}
{% if showMainTechBlock %}
<a href="{{ seoUrl('frontend.detail.page', { 'productId': id }) }}">
<div class="mobile-view-inline" style="background-color: white; padding: 25px; margin-bottom:3px">
<div class="product-details-technics" style="color:black">
{% block component_product_box_info %}
<div id="productInfo_{{id}}" class="product-info" style="text-align: left;">
{% if 'solar' in producttype %}
{% set pack = 'default' %}
{% set namespace = 'EmovaWbTheme' %}
{% if gesamtleistung is not empty %}
<div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{gesamtleistung}} Gesamtleistung
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if modulleistung is not empty %}
<div class="almarenaBold" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{modulleistung}} pro Modul
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if anzmodule is not empty %}
<div class="almarenaBold anzmodule" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr;height: 39px;align-items: center;">
<div>{% set icon = source('@' ~ namespace ~ '/assets/icon/'~ pack ~'/view-grid.svg', ignore_missing = true) %}
{{ icon|sw_icon_cache|raw }}</div>
<div>
{{anzmodule}} Module
</div>
</div>
{% else %}
<div class="almarenaBold" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% else %}
{% if ev_wallbox_kw is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 80" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,80.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M366 513 c-10 -49 -19 -96 -22 -105 -4 -15 1 -18 30 -18 34 0 36 -2
36 -35 0 -24 5 -35 15 -35 11 0 15 12 15 45 0 45 0 45 -36 45 -29 0 -34 3 -30
18 3 9 10 45 17 80 l12 62 74 0 74 0 -30 -54 c-17 -29 -31 -56 -31 -60 0 -3
13 -6 29 -6 l30 0 -52 -85 c-33 -54 -58 -85 -69 -85 -15 0 -18 -9 -18 -47 0
-29 4 -43 9 -38 5 6 46 70 90 143 l81 132 -30 0 c-16 0 -30 3 -30 8 0 4 14 30
30 57 16 28 30 53 30 58 0 4 -47 7 -104 7 l-103 0 -17 -87z"/>
</g>
</svg>
</div>
<div>
{{ev_wallbox_kw|map(x => x / 1000)|join(', ')}}
kW
</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if ev_wallbox_stecker is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30pt" height="30pt" viewbox="50 0 40 89" preserveaspectratio="xMidYMid meet">
<g transform="translate(0.000000,89.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M310 595 c0 -18 -5 -25 -20 -25 -11 0 -20 -4 -20 -9 0 -14 63 -20
183 -18 l107 2 0 -53 c0 -32 -7 -65 -16 -82 -35 -58 -111 -76 -181 -44 -41 20
-59 45 -68 97 -10 49 -31 43 -27 -8 5 -53 33 -89 92 -117 47 -22 49 -24 50
-65 0 -31 4 -43 15 -43 11 0 15 11 15 43 0 42 1 44 39 56 77 23 121 94 121
194 0 42 -2 46 -27 49 -20 2 -29 9 -31 26 -3 18 -10 22 -42 22 -32 0 -39 -4
-42 -22 -2 -18 -10 -23 -33 -23 -23 0 -31 5 -33 23 -3 18 -10 22 -43 22 -35 0
-39 -3 -39 -25z m60 -10 c0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 7 15 15
15 8 0 15 -7 15 -15z m150 0 c0 -8 -7 -15 -15 -15 -8 0 -15 7 -15 15 0 8 7 15
15 15 8 0 15 -7 15 -15z"/>
</g>
</svg>
</div>
<div>
Typ 2{# ev_wallbox_stecker|join(' ')#}</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% if ev_wallbox_app is not empty %}
<div class="almarenaRegular" style="font-size: 20px;margin-left: 1px;display: grid;grid-template-columns: 25px 1fr; align-items: center;">
<div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="50 0 40 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAABQCAQAAADc+MHRAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZ
cwAADsMAAA7DAcdvqGQAAAAHdElNRQfnBBIXBSp3oDAoAAABYklEQVRo3u3ZQUvCcBjH8a9pBRlp
saIo0F6B3jp66CYU9QpWCJ3z3EF6Bb6EegcdegWdim69hIGUREc7NJCnSxdTcrb/cIPfZ4eBzO27
+YBsAxEREREREaEerBiRllUrN+ddC4Dv+WExYjSG7Vu9Ne9moOSVwpw1zT+ZeoL4bxuG4Sy78P+v
loEBO+xN3bIKLLkqjptdBfpOY6JbmNNxlZ0hyla2slNF2cpWdqooW9nKTpUYN2VnwCHDg+vnTGWf
fzi+r51BRocko9kxhuTG47W3OIywpfHIIC3Zt8ATX05zosrokMTObtE5Jff30sl1+tvpyh7V3eoO
S4Yd2eWF2z2PijHbk7R/1vdJNpPQbBddX42ks2vUKPDJOpVEs2NclocJn728k+/22OW4neicxP41
+/z+w2mPPacPgDDJs5hFw2uEyzO8u9m0Shre3QCsBfnI2Vd2l5ZsEREREREREZFx33/nj40uG53m
AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIzLTA0LTE4VDIzOjA1OjQyKzAwOjAwgWHuqAAAACV0RVh0
ZGF0ZTptb2RpZnkAMjAyMy0wNC0xOFQyMzowNTo0MiswMDowMPA8VhQAAAAASUVORK5CYII="/>
</svg>
</div>
<div>
APP-Steuerung</div>
</div>
{% else %}
<div class="almarenaRegular" style="font-size: 20px ; margin-left:-24px">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30pt" height="30pt" viewbox="0 0 41 80" enable-background="new 0 0 91 80" xml:space="preserve">
<image id="image0" width="85" height="80" x="0" y="0"/></svg>
</div>
{% endif %}
{% endif %}
</div>
{% endblock %}
</div>
</div>
</a>
{% endif %}
<div id="productActions_{{id}}" style="background-color: white; padding: 32px 25px;">
{% if disableCompare is not true %}
{% block component_product_box_action_add_to_compare_button %}
{% sw_include '@Storefront/storefront/component/product/card/compare-button.html.twig' %}
{% endblock %}
{% else %}
<div class="compare-button" style="margin-bottom:20px; height:40px"></div>
{% endif %}
{% block component_product_box_price %}
{% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
{% endblock %}
{% block component_product_box_action %}
{% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
{% endblock %}
</div>
{% endblock %}
</div>
{% endif %}
{# <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
$("#shortDetailsArrowRight_{{id}}").click(function(){
$("#shortDetailsArrowRight_{{id}}").css('display', 'none');
$("#shortDetailsArrowDown_{{id}}").css('display', 'block');
$("#descriptionDetailsContent_{{id}}").css('display', 'block');
$("#productInfo_{{id}}").css('display', 'none');
$("#productActions_{{id}}").css('display', 'none');
});
$("#shortDetailsArrowDown_{{id}}").click(function(){
$("#shortDetailsArrowDown_{{id}}").css('display', 'none');
$("#shortDetailsArrowRight_{{id}}").css('display', 'block');
$("#descriptionDetailsContent_{{id}}").css('display', 'none');
$("#productInfo_{{id}}").css('display', 'block');
$("#productActions_{{id}}").css('display', 'block');
});
</script>
#}
{% endblock %}
<style>
a{
text-decoration: none !important;
}
.anzmodule svg {
width: 15px;
height: 24px;
}
.anzmodule svg use {
fill: black;
}
{
# @media screen and(max-width: 768px) {
.productItem {
width: 100% !important;
}
} #
}
.bottom-left {
color: black;
font: normal normal normal 20px / 22px Almarena W05;
padding: 10px 10px 0;
}
.top-mid {
font: normal normal normal 32px / 34px Almarena W05;
width: 100%;
text-align: start !important;
z-index: 1;
height: 102px !important;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.inline-div {
display: flex;
}
.p-0 {
padding-left: 0 0 0 0 !important;
}
.imgTopRightRadius {
border-top-right-radius: 3px;
object-fit: cover !important;
}
.f-size-14 {
font-size: 14px;
}
.f-size-20 {
font-size: 20px;
}
.f-size-25 {
font-size: 25px;
}
.horizontal-lignment {
display: flex;
flex-direction: row;
align-items: center;
}
.product-image {
max-height: 240px !important;
}
.product-description {
height: auto !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: -webkit-box !important;
-webkit-line-clamp: 4 !important;
-webkit-box-orient: vertical !important;
font-size: 20px !important;
line-height: 20px !important;
}</style>