product page

assets/css/app.css

@@ -191,6 +191,8 @@
 [data-theme="dark"] .rich-content a { color: var(--color-primary-dark); }
 .rich-content :first-child { margin-top: 0; }
 .rich-content :last-child { margin-bottom: 0; }
+.rich-summary :where(p) { display: inline; margin: 0; }
+.rich-summary .product-more-link { margin-left: 0.25rem; }
 
 /* Compact rich blurb for product cards: neutralize block spacing so the
  * line-clamp truncation stays tidy regardless of the authored markup. */

assets/i18n/en-US/main.ftl

@@ -152,6 +152,7 @@ artist = Artist
 release-date = Release date
 cover-image = Cover image
 description = Description
+product-more = more
 songs-in-album = Songs in this album
 admin-new-album-desc = Fill in the details, then tick the songs to include.
 cover-help = Optional - png, jpg, webp or gif; shown on the album page.

assets/i18n/en/main.ftl

@@ -172,6 +172,7 @@ artist = Artist
 release-date = Release date
 cover-image = Cover image
 description = Description
+product-more = more
 short-description = Short description
 short-description-hint = Shown on product cards. Keep it short.
 songs-in-album = Songs in this album

assets/i18n/sk/main.ftl

@@ -172,6 +172,7 @@ artist = Interpret
 release-date = Dátum vydania
 cover-image = Obrázok obalu
 description = Popis
+product-more = viac
 short-description = Krátky popis
 short-description-hint = Zobrazuje sa na kartách produktov. Najlepšie krátke.
 songs-in-album = Skladby v albume

assets/views/shop/show.html

@@ -4,6 +4,7 @@
 {% block title %}{{ product.name }}{% endblock title %}
 
 {% block content %}
+<div class="space-y-12">
 <div class="grid gap-10 lg:grid-cols-2">
   <!-- gallery — prev/next arrows + opacity transitions adapted from
        penguinui/carousel/default-carousel.html; kept our product thumbnail strip
@@ -67,9 +68,15 @@
     {% endif %}
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
 
-    {% if product.description %}
-    {# Authored as rich text (Quill) in the admin; render the stored HTML. #}
-    <div class="rich-content text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description | safe }}</div>
+    {% if product.short_description %}
+    <div class="rich-content rich-summary text-on-surface/80 dark:text-on-surface-dark/80">
+      {{ product.short_description | safe }}
+      {% if product.description %}
+      <a href="#product-description" class="product-more-link inline font-medium text-primary underline underline-offset-4 hover:opacity-75 dark:text-primary-dark">{{ t(key="product-more", lang=lang | default(value='sk')) }}</a>
+      {% endif %}
+    </div>
+    {% elif product.description %}
+    <a href="#product-description" class="inline-flex text-sm font-medium text-primary underline underline-offset-4 hover:opacity-75 dark:text-primary-dark">{{ t(key="product-more", lang=lang | default(value='sk')) }}</a>
     {% endif %}
 
     <template x-if="current">
@@ -129,4 +136,12 @@
     </template>
   </div>
 </div>
+{% if product.description %}
+<section id="product-description" class="scroll-mt-28 border-t border-outline pt-8 dark:border-outline-dark">
+  <h2 class="mb-4 text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="description", lang=lang | default(value='sk')) }}</h2>
+  {# Authored as rich text (Quill) in the admin; render the stored HTML. #}
+  <div class="rich-content text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description | safe }}</div>
+</section>
+{% endif %}
+</div>
 {% endblock content %}