Bump product-main max-height from 33vh to 42vh

make_post_sell/static/css/common.css

@@ -412,7 +412,7 @@ img.product-thumbnail {
 }
 
 .product-main {
-    max-height: 33vh;
+    max-height: 42vh;
 }
 
 .product-images {
@@ -422,7 +422,7 @@ img.product-thumbnail {
 .product-images img.product-main,
 div.product-images img.product-main {
     max-width: 100%;
-    max-height: 33vh;
+    max-height: 42vh;
     width: auto;
     height: auto;
 }
@@ -438,7 +438,7 @@ div.product-images img.product-main {
 .video-thumbnail-container img.product-main {
     display: block;
     max-width: 100%;
-    max-height: 33vh;
+    max-height: 42vh;
     height: auto;
 }
 
@@ -1391,7 +1391,7 @@ textarea.markup-editor-textarea {
     
     .product-images img.product-main {
         max-width: 100%;
-        max-height: 33vh;
+        max-height: 42vh;
         width: auto;
         height: auto;
     }
@@ -2595,7 +2595,7 @@ textarea {
 
 .watch-video-container video.product-main {
     max-width: 100%;
-    max-height: 33vh;
+    max-height: 42vh;
     width: auto;
     height: auto;
 }
@@ -2692,7 +2692,7 @@ textarea {
 }
 
 .watch-audio-container .audio-cover {
-    max-height: 33vh;
+    max-height: 42vh;
     width: auto;
     max-width: 100%;
     display: block;
@@ -2703,59 +2703,76 @@ textarea {
     margin-top: 8px;
 }
 
-/* Watch countdown overlay */
+/* Watch countdown overlay — compact bottom bar with frosted glass */
 .watch-countdown {
     position: absolute;
-    top: 0;
+    bottom: 0;
     left: 0;
     right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.85);
+    background: rgba(255, 255, 255, 0.75);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     display: grid;
-    grid-template-columns: 120px 1fr;
-    grid-template-rows: 1fr auto;
-    gap: 12px;
-    padding: 20px;
+    grid-template-columns: 60px 1fr auto auto;
+    gap: 10px;
+    padding: 10px 14px;
     align-items: center;
     z-index: 30;
+    border-top: 1px solid var(--border-color, #dee2e6);
+}
+
+[data-theme="dark"] .watch-countdown {
+    background: rgba(13, 17, 23, 0.80);
+    border-top: 1px solid var(--border-color, #7ab9ff);
 }
 
 .countdown-thumb {
-    grid-row: 1;
     grid-column: 1;
-    width: 120px;
+    width: 60px;
     height: auto;
     border-radius: 4px;
 }
 
 .countdown-text {
-    grid-row: 1;
     grid-column: 2;
-    color: white;
+    color: var(--text-primary, #333);
     display: grid;
-    gap: 8px;
+    gap: 2px;
 }
 
 #countdown-title {
-    font-size: 1rem;
+    font-size: 0.85rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #countdown-number {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
     font-weight: bold;
+    color: var(--blue-color, #98b6fa);
 }
 
 .watch-countdown .mps-button {
-    grid-row: 2;
-    justify-self: start;
+    padding: 6px 14px;
+    font-size: 0.85rem;
 }
 
 #countdown-play-now {
-    grid-column: 1;
+    grid-column: 3;
 }
 
 #countdown-cancel {
-    grid-column: 2;
+    grid-column: 4;
+}
+
+/* Static content countdown: flows in-place, not overlaid */
+.watch-countdown-static {
+    position: relative;
+    border-top: none;
+    border: 1px solid var(--border-color, #dee2e6);
+    border-radius: 6px;
+    margin-top: 8px;
 }
 
 /* Queue UI */