<div class="description-and-detail">
    <div class="row product-attributes collapsible-xs">
        <isinclude template="product/components/attributes" />
    </div>

    <isif condition="${product.attributes && product.attributes.length}">
        <hr class="d-sm-none">
    </isif>

    <div class="row description collapsible-xs <isif condition="${!product.shortDescription}">hidden-xl-down</isif>">
        <div class="col-sm-12 col-md-4 col-lg-3">
            <button class="title btn text-left btn-block d-sm-none"
                    aria-expanded="false" aria-controls="collapsible-description-${loopState && loopState.count ? loopState.count : '1' }"
            >
                ${Resource.msg('label.description', 'product', null)}
            </button>
            <h2 class="title d-none d-sm-block">${Resource.msg('label.description', 'product', null)}</h2>
        </div>

        <isinclude template="product/components/description" />
    </div>

    <isif condition="${product.longDescription}">
        <hr class="d-sm-none">
    </isif>

    <div class="row details collapsible-xs <isif condition="${!product.longDescription}">hidden-xl-down</isif>">
        <div class="col-sm-12 col-md-4 col-lg-3">
            <button class="title btn text-left btn-block d-sm-none"
                    aria-expanded="false" aria-controls="collapsible-details-${loopState && loopState.count ? loopState.count : '1' }"
            >
                ${Resource.msg('label.details', 'product', null)}
            </button>
            <h2 class="title d-none d-sm-block">
                ${Resource.msg('label.details', 'product', null)}
            </h2>
        </div>

        <isinclude template="product/components/details" />
    </div>
</div>
