</if>
        <if [condition]="detail.canUploadImage">

<image-upload-context [uploadScope]="detail.productId" [fileId]="detail.imageFileId" (loaded)="attachment = $event" (selectedFileId)="detail.actions.setImageFileId($event)" />
<if [condition]="attachment">
  <section class="cq-product-attachment" [aria-label]="hdr.locale === 'hu' ? 'Csatolt kép' : 'Attached image'">
    <media-context (loaded)="attachmentMedia = $event" />

<if [condition]="attachment.preview && attachmentMedia">
    <image-transform-context [source]="attachment.preview" (loaded)="attachmentTransform = $event" />
    <button class="cq-product-preview" type="button" commandfor="cq-attachment-lightbox" command="show-modal" [aria-label]="hdr.locale === 'hu' ? 'Termékkép nagyítása' : 'Zoom product image'">
      <img [src]="attachmentMedia.actions.src(attachment.preview, 960)" [srcset]="attachmentMedia.actions.srcset(attachment.preview, [320, 640, 960, 1600])" sizes="(max-width: 720px) 100vw, 50vw" [alt]="(hdr.locale === 'hu' ? 'Csatolt kép' : 'Attached image')" />
    </button>
    <if [condition]="attachmentTransform">
      <dialog id="cq-attachment-lightbox" class="cq-product-lightbox" [aria-label]="(hdr.locale === 'hu' ? 'Csatolt kép' : 'Attached image') + (hdr.locale === 'hu' ? ' – kép nagyítása' : ' – zoom image')" (close)="attachmentTransform.actions.reset()" (keydown)="attachmentTransform.actions.key($event.key, $event.shiftKey)">
        <button class="cq-lightbox-backdrop" type="button" tabindex="-1" commandfor="cq-attachment-lightbox" command="close" [aria-label]="hdr.locale === 'hu' ? 'Nagyítás bezárása' : 'Close zoom'" />
        <section class="cq-lightbox-panel">
          <button class="cq-lightbox-close" type="button" autofocus commandfor="cq-attachment-lightbox" command="close" [aria-label]="hdr.locale === 'hu' ? 'Bezárás' : 'Close'">×</button>
          <div class="cq-lightbox-stage" (wheel)="attachmentTransform.actions.wheel($event.deltaY)" (pointerdown)="attachmentTransform.actions.start($event.clientX, $event.clientY)" (pointermove)="attachmentTransform.actions.move($event.clientX, $event.clientY)" (pointerup)="attachmentTransform.actions.end()" (pointercancel)="attachmentTransform.actions.end()" (pointerleave)="attachmentTransform.actions.end()" (click)="attachmentTransform.actions.click()">
            <img [src]="attachmentMedia.actions.src(attachment.preview)" [alt]="(hdr.locale === 'hu' ? 'Csatolt kép' : 'Attached image')" loading="lazy" draggable="false" [style]="'transform: ' + attachmentTransform.transform" />
          </div>
          <div class="cq-lightbox-toolbar" [aria-label]="hdr.locale === 'hu' ? 'Kép vezérlése' : 'Image controls'">
            <button type="button" [aria-label]="hdr.locale === 'hu' ? 'Kicsinyítés' : 'Zoom out'" [disabled]="attachmentTransform.scalePercent <= 100" (click)="attachmentTransform.actions.zoomOut()">−</button>
            <output [aria-label]="hdr.locale === 'hu' ? 'Nagyítás' : 'Zoom'"><print [value]="attachmentTransform.scalePercent" />%</output>
            <button type="button" [aria-label]="hdr.locale === 'hu' ? 'Nagyítás' : 'Zoom'" [disabled]="attachmentTransform.scalePercent >= 400" (click)="attachmentTransform.actions.zoomIn()">+</button>
            <button type="button" [aria-label]="hdr.locale === 'hu' ? 'Forgatás balra' : 'Rotate left'" (click)="attachmentTransform.actions.rotateLeft()">↶</button>
            <button type="button" [aria-label]="hdr.locale === 'hu' ? 'Forgatás jobbra' : 'Rotate right'" (click)="attachmentTransform.actions.rotateRight()">↷</button>
            <button type="button" (click)="attachmentTransform.actions.reset()"><print [value]="hdr.locale === 'hu' ? 'Alaphelyzet' : 'Reset'" /></button>
          </div>
          <p class="cq-lightbox-hint"><print [value]="hdr.locale === 'hu' ? 'Kattints a képre a nagyításhoz. Nagyítás után húzással mozgathatod.' : 'Click the image to zoom. Drag to move it after zooming.'" /></p>
        </section>
      </dialog>
    </if>
  </if>

<div class="cq-attachment-actions">
    <label class="cq-file-control">
      <input type="file" accept="image/*" [disabled]="attachment.uploading" (change)="attachment.actions.select($event)" />
      <span><print [value]="attachment.preview ? (hdr.locale === 'hu' ? 'Kép cseréje' : 'Replace image') : (hdr.locale === 'hu' ? 'Kép csatolása' : 'Attach image')" /></span>
    </label>
    <if [condition]="attachment.preview || attachment.error"><button type="button" [disabled]="attachment.uploading" (click)="attachment.actions.remove()"><print [value]="attachment.preview ? (hdr.locale === 'hu' ? 'Kép eltávolítása' : 'Remove image') : (hdr.locale === 'hu' ? 'Mégsem csatolok képet' : 'Do not attach an image')" /></button></if>
    </div>
    <if [condition]="attachment.uploading"><p role="status"><print [value]="hdr.locale === 'hu' ? 'Kép feltöltése…' : 'Uploading image…'" /></p></if>
    <if [condition]="attachment.error"><p role="alert" class="cq-flow-error"><print [value]="attachment.error === 'sizeLimit' ? (hdr.locale === 'hu' ? 'Legfeljebb 5 MB-os képet csatolhatsz.' : 'You can attach an image up to 5 MB.') : attachment.error === 'fileType' ? (hdr.locale === 'hu' ? 'Válassz egy képfájlt.' : 'Choose an image file.') : (hdr.locale === 'hu' ? 'A kép feltöltése nem sikerült. Próbáld újra.' : 'The image could not be uploaded. Please try again.')" /></p></if>
  </section>
</if>
        </if>
        <if [condition]="detail.allowImageUpload && !detail.canUploadImage"><p><print [value]="hdr.locale === 'hu' ? 'Kép csatolásához' : 'To attach an image,'" /> <a href="/login"><print [value]="hdr.locale === 'hu' ? 'jelentkezz be' : 'sign in'" /></a>.</p></if>
        <div class="cq-product-buybar">
          <label for="cq-product-quantity"><print [value]="hdr.locale === 'hu' ? 'Mennyiség' : 'Quantity'" /></label>
          <input id="cq-product-quantity" type="number" min="1" [value]="detail.quantityInput" [aria-invalid]="detail.quantityInvalid" (input)="detail.actions.setQuantity($event.target.value)" />
          <if [condition]="detail.quantityInvalid"><p role="alert" class="cq-flow-error"><print [value]="hdr.locale === 'hu' ? 'Adj meg legalább 1-et.' : 'Enter at least 1.'" /></p></if>
          <p class="cq-flow-total"><print [value]="detail.actions.formatMoney(detail.total)" /></p>
          <button type="button" class="cq-flow-primary" id="cq-product-add" [disabled]="!detail.canAdd || (detail.canUploadImage && attachment && (attachment.uploading || attachment.error))" (click)="detail.actions.add()"><print [value]="detail.added ? (hdr.locale === 'hu' ? 'Kosárba került!' : 'Added to basket!') : detail.cartQuantity > 0 ? (hdr.locale === 'hu' ? 'Még egyet a kosárba' : 'Add another to basket') : (hdr.locale === 'hu' ? 'Kosárba teszem' : 'Add to basket')" /></button>
          <if [condition]="detail.cartQuantity > 0"><p role="status"><print [value]="detail.cartQuantity" /> <print [value]="hdr.locale === 'hu' ? 'db a kosaradban.' : 'items in your basket.'" /> <a href="/my-cart"><print [value]="hdr.locale === 'hu' ? 'Megnézem a kosaram' : 'View my basket'" /></a></p></if>
        </div>

<shipping-estimate-context [productId]="detail.productId" [currency]="detail.currency" [quantity]="detail.quantity" [optionIds]="detail.shippingOptionIds" (loaded)="shippingEstimate = $event" />
<if [condition]="shippingEstimate.visible">
  <section class="cq-shipping-estimate" [aria-label]="hdr.locale === 'hu' ? 'Becsült szállítás' : 'Delivery estimate'">
    <if [condition]="!shippingEstimate.pickupOnly">
      <if [condition]="shippingEstimate.countries.length > 1 || shippingEstimate.needsCity">
        <details [open]="shippingEstimate.needsDestination">
          <summary><print [value]="hdr.locale === 'hu' ? 'Szállítás ide:' : 'Deliver to:'" /> <print [value]="shippingEstimate.countryName" /><if [condition]="shippingEstimate.city">, <print [value]="shippingEstimate.city.name" /></if><span class="cq-estimate-change"><print [value]="hdr.locale === 'hu' ? 'Módosítás' : 'Edit'" /></span></summary>
          <if [condition]="shippingEstimate.countries.length > 1">
            <label for="cq-estimate-country"><print [value]="hdr.locale === 'hu' ? 'Ország' : 'Country'" /></label>
            <select id="cq-estimate-country" autocomplete="country" (change)="shippingEstimate.actions.selectCountry($event.target.value)">
              <option value="" disabled [selected]="!shippingEstimate.country"><print [value]="hdr.locale === 'hu' ? 'Válassz országot' : 'Choose a country'" /></option>
              <loop [data]="shippingEstimate.countries" let="country" trackBy="code"><option [value]="country.code" [selected]="country.code === shippingEstimate.country"><print [value]="country.name" /></option></loop>
            </select>
          </if>
          <if [condition]="shippingEstimate.needsCity">
            <shipping-city-context [countryCode]="shippingEstimate.country" [value]="shippingEstimate.city ? shippingEstimate.city.name : ''" (loaded)="estimateCityLookup = $event" (selectionChange)="shippingEstimate.actions.selectCity($event)" />
            <label for="cq-estimate-city"><print [value]="hdr.locale === 'hu' ? 'Település' : 'Town or city'" /></label>
            <input id="cq-estimate-city" type="search" autocomplete="address-level2" [value]="estimateCityLookup.query" (input)="estimateCityLookup.actions.search($event.target.value)" />
            <if [condition]="estimateCityLookup.loading"><p role="status"><print [value]="hdr.locale === 'hu' ? 'Települések keresése…' : 'Searching towns and cities…'" /></p></if>
            <if [condition]="estimateCityLookup.error"><p role="alert"><print [value]="hdr.locale === 'hu' ? 'A keresés most nem sikerült. Próbáld újra.' : 'Search failed. Please try again.'" /></p></if>
            <ul [aria-label]="hdr.locale === 'hu' ? 'Talált települések' : 'Matching towns and cities'">
              <loop [data]="estimateCityLookup.suggestions" let="city" trackBy="id"><li><button type="button" (click)="estimateCityLookup.actions.choose(city.id)"><print [value]="city.label" /> <print [value]="city.description" /></button></li></loop>
            </ul>
            <if [condition]="estimateCityLookup.searched && !estimateCityLookup.suggestions.length && !estimateCityLookup.loading"><p><print [value]="hdr.locale === 'hu' ? 'Nincs találat. Próbáld másképp írni a település nevét.' : 'No results. Try another spelling of the town or city.'" /></p></if>
            <small><print [value]="estimateCityLookup.attribution" /></small>
          </if>
        </details>
      </if>
      <if [condition]="shippingEstimate.countries.length === 1 && !shippingEstimate.needsCity"><p><print [value]="hdr.locale === 'hu' ? 'Szállítás ide:' : 'Deliver to:'" /> <print [value]="shippingEstimate.countryName" /></p></if>
    </if>
    <div role="status" aria-live="polite">
      <if [condition]="shippingEstimate.loading"><p><print [value]="hdr.locale === 'hu' ? 'Szállítás ellenőrzése…' : 'Checking delivery…'" /></p></if>
      <if [condition]="!shippingEstimate.loading && shippingEstimate.failed"><p><print [value]="hdr.locale === 'hu' ? 'A becslés most nem érhető el. Rendeléskor újra ellenőrizzük.' : 'An estimate is unavailable. We will check again at checkout.'" /></p></if>
      <if [condition]="!shippingEstimate.loading && !shippingEstimate.failed">
        <if [condition]="shippingEstimate.needsDestination"><p><print [value]="hdr.locale === 'hu' ? 'Válassz célterületet a szállítási becsléshez.' : 'Choose a destination for the delivery estimate.'" /></p></if>
        <if [condition]="!shippingEstimate.needsDestination">
          <loop [data]="shippingEstimate.timings" let="timing" trackBy="label"><p class="cq-estimate-time"><print [value]="timing.label === 'Estimated arrival in' ? (hdr.locale === 'hu' ? 'Várható érkezés' : 'Estimated arrival') : timing.label === 'Ready for pickup in' ? (hdr.locale === 'hu' ? 'Várhatóan átvehető' : 'Ready for collection') : timing.label === 'Ready for dispatch in' ? (hdr.locale === 'hu' ? 'Feladás' : 'Dispatch') : (hdr.locale === 'hu' ? 'Szállítás feladás után' : 'Delivery after dispatch')" />: <print [value]="timing.value" /></p></loop>
          <if [condition]="!shippingEstimate.pickupOnly && shippingEstimate.hasEstimate"><p><print [value]="hdr.locale === 'hu' ? 'Szállítás' : 'Delivery'" /> <print [value]="shippingEstimate.price" /><print [value]="hdr.locale === 'hu' ? '-tól' : ' and up'" /></p><p class="cq-estimate-note"><print [value]="hdr.locale === 'hu' ? 'Becslés erre a termékre és mennyiségre. A végleges díjat rendeléskor számoljuk ki.' : 'Estimate for this product and quantity. The final fee is calculated at checkout.'" /></p></if>
          <if [condition]="!shippingEstimate.pickupOnly && !shippingEstimate.hasEstimate"><p><print [value]="hdr.locale === 'hu' ? 'Ehhez a termékhez és célterülethez most nincs szállítási becslés.' : 'No delivery estimate is available for this product and destination.'" /></p></if>
        </if>
      </if>
    </div>
  </section>
</if>
        <if [condition]="detail.feedbackRequested">
<product-feedback-context [productId]="detail.productId" (loaded)="feedback = $event" />
<if [condition]="feedback">
  <section class="cq-product-feedback" [aria-label]="hdr.locale === 'hu' ? 'Privát visszajelzés' : 'Private feedback'">
    <button type="button" [aria-expanded]="feedback.open" aria-controls="cq-feedback-form" (click)="feedback.actions.toggle()"><print [value]="hdr.locale === 'hu' ? 'Mondd el, mit javítsunk ezen a terméken!' : 'Tell us how we can improve this product!'" /></button>
    <if [condition]="feedback.open">
      <form id="cq-feedback-form" (submit)="feedback.actions.submit($event)">
        <p><print [value]="hdr.locale === 'hu' ? 'Privát visszajelzés — csak az üzlet csapata látja.' : 'Private feedback — only the shop team can see it.'" /></p>
        <label for="cq-feedback-comment"><print [value]="hdr.locale === 'hu' ? 'A visszajelzésed' : 'Your feedback'" /></label>
        <textarea id="cq-feedback-comment" rows="4" maxlength="500" [value]="feedback.comment" [disabled]="feedback.submitting" (input)="feedback.actions.setComment($event.target.value)" aria-describedby="cq-feedback-count" />
        <p id="cq-feedback-count"><print [value]="feedback.comment.length" /> <print [value]="hdr.locale === 'hu' ? '/ 500 karakter' : '/ 500 characters'" /></p>
        <button type="submit" class="cq-flow-primary" [disabled]="!feedback.canSubmit"><print [value]="feedback.submitting ? (hdr.locale === 'hu' ? 'Küldés…' : 'Sending…') : (hdr.locale === 'hu' ? 'Visszajelzés küldése' : 'Send feedback')" /></button>
      </form>
    </if>
    <if [condition]="feedback.notice === 'sent'"><p role="status"><print [value]="hdr.locale === 'hu' ? 'Köszönjük, a privát visszajelzésed eljutott az üzlet csapatához.' : 'Thank you. Your private feedback has reached the shop team.'" /></p></if>
    <if [condition]="feedback.notice === 'failed'"><p role="alert" class="cq-flow-error"><print [value]="hdr.locale === 'hu' ? 'Nem sikerült elküldeni a visszajelzést. Próbáld újra.' : 'Feedback could not be sent. Please try again.'" /></p></if>
  </section>
</if></if>
      </article>
    </div>

<recommendations-context [productIds]="detail.recommendationIds" (loaded)="recommendations = $event" />
<media-context (loaded)="recommendationMedia = $event" />
<if [condition]="recommendations && recommendationMedia">
  <if [condition]="recommendations.failed">
    <p role="alert"><print [value]="hdr.locale === 'hu' ? 'Az ajánlott termékeket nem sikerült betölteni.' : 'Recommended products could not be loaded.'" /></p>
    <button type="button" (click)="recommendations.actions.retry()"><print [value]="hdr.locale === 'hu' ? 'Újrapróbálás' : 'Retry'" /></button>
  </if>
  <if [condition]="recommendations.items.length > 0">
    <section class="cq-recommendations" [aria-label]="hdr.locale === 'hu' ? 'Ajánlott termékek' : 'Recommended products'">
      <h2><print [value]="hdr.locale === 'hu' ? 'Ezeket is ajánljuk' : 'You may also like'" /></h2>
      <div class="cq-recommendation-list">
        <loop [data]="recommendations.items" let="item" trackBy="key">
          <article class="cq-recommendation-card">
            <if [condition]="item.image"><img [src]="recommendationMedia.actions.src(item.image, 320, 240)" alt="" width="320" height="240" loading="lazy" /></if>
            <h3><a [href]="item.href"><print [value]="item.name" /></a></h3>
            <p><if [condition]="item.originalPrice"><s><print [value]="item.originalPrice" /></s> </if><strong><print [value]="item.price" /></strong></p>
            <button type="button" [aria-label]="item.name + (hdr.locale === 'hu' ? ' kiválasztása' : ' – select')" [disabled]="!recommendations.interactive" (click)="recommendations.actions.open(item.id)" commandfor="cq-recommendation" command="show-modal"><print [value]="hdr.locale === 'hu' ? 'Kiválasztom' : 'Select'" /></button>
          </article>
        </loop>
      </div>
    </section>
  </if>
  <dialog id="cq-recommendation" class="cq-recommendation-dialog" [aria-label]="hdr.locale === 'hu' ? 'Ajánlott termék kiválasztása' : 'Choose a recommended product'">
    <div class="cq-recommendation-heading"><h2><print [value]="hdr.locale === 'hu' ? 'Termék hozzáadása' : 'Add product'" /></h2><button type="button" commandfor="cq-recommendation" command="close" autofocus="" [aria-label]="hdr.locale === 'hu' ? 'Bezárás' : 'Close'">✕</button></div>
    <if [condition]="recommendations.selection">
      <div class="cq-recommendation-detail">
        <if [condition]="recommendations.selection.image"><img [src]="recommendationMedia.actions.src(recommendations.selection.image, 480, 360)" alt="" width="480" height="360" /></if>
        <div>
          <h3><print [value]="recommendations.selection.name" /></h3>
          <p><print [value]="recommendations.selection.description" /></p>
          <if [condition]="recommendations.selection.configurable">
            <loop [data]="recommendations.selection.choices" let="choice">
              <fieldset class="cq-recommendation-choice" [disabled]="recommendations.selection.added">
                <legend><print [value]="choice.name" /><if [condition]="choice.required"> <print [value]="hdr.locale === 'hu' ? '· kötelező' : '· required'" /></if></legend>
                <if [condition]="choice.maxSelect > 0"><p><print [value]="hdr.locale === 'hu' ? 'Legfeljebb' : 'Up to'" /> <print [value]="choice.maxSelect" /> <print [value]="hdr.locale === 'hu' ? 'választható.' : 'available.'" /></p></if>
                <loop [data]="choice.options" let="option">
                  <label class="cq-recommendation-option"><input type="checkbox" [checked]="option.selected" [disabled]="option.disabled" (change)="recommendations.selection.actions.choose(choice.id, option.id, $event.target.checked)" /><span><print [value]="option.label" /></span></label>
                </loop>
              </fieldset>
            </loop>
            <label for="cq-recommendation-quantity"><print [value]="hdr.locale === 'hu' ? 'Mennyiség' : 'Quantity'" /></label>
            <input id="cq-recommendation-quantity" type="number" min="1" step="1" [value]="recommendations.selection.quantityInput" [disabled]="recommendations.selection.added" [aria-invalid]="recommendations.selection.quantityInvalid" (input)="recommendations.selection.actions.setQuantity($event.target.value)" />
            <if [condition]="recommendations.selection.quantityInvalid"><p role="alert" class="cq-flow-error"><print [value]="hdr.locale === 'hu' ? 'Adj meg legalább 1 egész darabot.' : 'Enter at least one whole item.'" /></p></if>
            <p class="cq-flow-total"><print [value]="recommendations.selection.total" /></p>
            <if [condition]="recommendations.selection.feedback"><p role="status"><print [value]="recommendations.selection.added ? (hdr.locale === 'hu' ? 'Hozzáadtuk a kosaradhoz.' : 'Added to your basket.') : (hdr.locale === 'hu' ? 'A hozzáadást visszavontuk.' : 'The addition was undone.')" /></p></if>
            <if [condition]="!recommendations.selection.added"><button type="button" class="cq-flow-primary" [disabled]="!recommendations.selection.canAdd" (click)="recommendations.selection.actions.add()"><print [value]="hdr.locale === 'hu' ? 'Kosárba teszem' : 'Add to basket'" /></button></if>
            <if [condition]="recommendations.selection.added"><div class="cq-recommendation-actions"><button type="button" (click)="recommendations.selection.actions.undo()"><print [value]="hdr.locale === 'hu' ? 'Visszavonás' : 'Undo'" /></button><a href="/my-cart"><print [value]="hdr.locale === 'hu' ? 'Kosár megnyitása →' : 'Open basket →'" /></a></div></if>
          </if>
          <if [condition]="!recommendations.selection.configurable"><p><print [value]="hdr.locale === 'hu' ? 'A termék további beállításokat igényel.' : 'This product requires more options.'" /></p></if>
          <a [href]="recommendations.selection.href"><print [value]="hdr.locale === 'hu' ? 'Termék részletei →' : 'Product details →'" /></a>
        </div>
      </div>
    </if>
    <if [condition]="!recommendations.selection"><p><print [value]="hdr.locale === 'hu' ? 'A termék már nem érhető el ebben a választóban. Zárd be, és válassz újra.' : 'This product is no longer available in this selector. Close it and choose again.'" /></p></if>
  </dialog>
</if>
  </if>
</div></section></main><include src="pacsi-footer" /></div>
</article></body></html>

Product details

DEMO 01