move devices

theme/assets/css/main.css

@@ -1656,7 +1656,80 @@ p:last-child { margin-bottom: 0; }
   font-size: .9rem;
 }
 
-/* ── 8d. Image Card ────────────────────────────────────────── */
+/* ── 8d. Device Card ───────────────────────────────────────── */
+.device-grid {
+  --cols: 2;
+}
+.oribi-card.device-card {
+  display: flex;
+  flex-direction: column;
+  border-top: 3px solid var(--color-primary);
+  background: var(--card-bg);
+  padding: 0;
+  overflow: hidden;
+}
+.device-card img,
+.device-card .card-image {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  display: block;
+}
+.device-card-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 1.5rem;
+}
+.device-best-for {
+  display: inline-block;
+  font-size: var(--wp--preset--font-size--xs, .75rem);
+  background: var(--color-primary-lt);
+  color: var(--color-primary);
+  padding: .25rem .75rem;
+  border-radius: 999px;
+  margin-bottom: .75rem;
+  font-weight: 600;
+}
+.device-card h3 {
+  color: var(--color-heading);
+  margin-bottom: .5rem;
+}
+.device-card p {
+  font-size: .9rem;
+  margin-bottom: 1rem;
+}
+.device-specs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: .25rem .75rem;
+  font-size: .85rem;
+  margin: 0 0 1.25rem;
+  padding: 0;
+}
+.device-specs dt {
+  color: var(--color-muted, #6b7280);
+  font-weight: 500;
+}
+.device-specs dd {
+  margin: 0;
+  font-weight: 600;
+  color: var(--color-heading);
+}
+.device-price {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin-bottom: 1.25rem;
+}
+.device-card-btn {
+  display: block;
+  width: 100%;
+  text-align: center;
+  margin-top: auto;
+}
+
+/* ── 8e. Image Card ────────────────────────────────────────── */
 .image-card {
   padding: 0;
   overflow: hidden;