.

cards/templates/cards/_card_hero_styles.html

@@ -1,24 +1,19 @@
 <style>
-  /* Canonical card size variables used by preview and printable views so
+  /* Shared hero image rules used by both preview (base.html) and printable view.
-     the card internal layout is identical between screen and print. These
+     This file no longer forces global card dimensions (those break the list
-     defaults can be overridden by wrappers if needed. Units are in mm to
+     view). When a canonical card size is needed (printable/preview) a
-     match print sizing. */
+     `.card-canonical` ancestor or explicit CSS variables should be provided
-  :root{
+     (eg. `--card-width`/`--card-height`). We fall back to sensible defaults
-    --card-width: 83mm;    /* default card width */
+     so components degrade gracefully. */
-    --card-height: 120mm;  /* default card height */
+
+  .toptrump-card{ box-sizing:border-box; overflow:hidden; border-radius:8px; background-clip:padding-box; }
+
+  .card-canonical .toptrump-card {
+    width: var(--card-width, 83mm);
+    height: var(--card-height, 120mm);
   }
 
-  /* Shared hero image rules used by both preview (base.html) and printable view */
+  .toptrump-card .hero-image{height:calc(var(--card-height, 120mm) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
-  .toptrump-card{
-    width:var(--card-width);
-    height:var(--card-height);
-    box-sizing:border-box;
-    overflow:hidden;
-    border-radius:8px;
-    background-clip:padding-box;
-  }
-
-  .toptrump-card .hero-image{height:calc(var(--card-height) * 0.45); background-size:cover;background-position:center;position:relative;overflow:hidden}
 
   /* For most designs center the dino image absolutely and allow an inline
      scale transform (the fragments provide `transform: translate(...) scale(...)`). */

cards/templates/cards/print.html

@@ -76,7 +76,7 @@
               <div style="font-weight:700">Sample</div>
               <button id="sample-hide-btn" type="button" style="border:0; background:transparent; cursor:pointer; font-weight:700">✕</button>
             </div>
-            <div id="sample-preview" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
+            <div id="sample-preview" class="card-canonical" style="width:100%; height:calc(100% - 56px); overflow:auto; position:relative; display:flex; align-items:flex-start; justify-content:center; padding:8px; box-sizing:border-box;">
               {% comment %} Render all design fragments hidden and toggle via JS. Each fragment should contain a `.toptrump-card`. {% endcomment %}
               <div class="design-preview design-1" style="display:none">
                 {% include 'cards/_card_inner_design1.html' with card=sample_card background=background %}

cards/templates/cards/printable.html

@@ -5,6 +5,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Printable cards</title>
     <style>
+      /* Canonical card size for printable view */
+      :root{ --card-width: 83mm; --card-height: 120mm; }
       /* A4 portrait: 210mm x 297mm. Use mm units to better match print sizing. */
       @page { size: A4 portrait; margin: 12mm; }
       html,body{height:100%; margin:0; padding:0;}