/* Recommended section */
    /* ===  =========================== */
    .recommended-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:14px;
    }
    .recommended{
      margin-bottom:24px;
    }
    .recommended h2{
      margin:0 0 8px;
      font-size:1.1rem;
    }
    .recommended-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:14px;
    }

    /* Base: Recommended cards use type-specific CSS variables */
    /* ===  =========================== */
    .rec-card{
      /* defaults, overridden per type */
      --rec-border: var(--border);
      --rec-tag-bg: rgba(148,197,255,.15);
      --rec-tag-color: #bfdbfe;
      --rec-btn-bg: rgba(37,99,235,.9);
      --rec-btn-border: rgba(191,219,254,.95);

      background:var(--card);
      border-radius:14px;
      border:1px solid var(--rec-border);
      padding:12px 14px 14px;
      box-shadow:var(--shadow);
    }

    .rec-type-pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:3px 10px;
      border-radius:999px;
      font-size:.75rem;
      font-weight:600;
      letter-spacing:.02em;
      background:var(--rec-tag-bg);
      color:var(--rec-tag-color);
      margin-bottom:6px;
    }

    .rec-title{
      font-weight:600;
      margin-bottom:4px;
    }
    .rec-desc{
      font-size:.9rem;
      color:var(--muted);
      margin-bottom:8px;
    }
    .rec-meta{
      font-size:.8rem;
      color:var(--muted);
      margin-bottom:10px;
    }

    .rec-actions a{
      display:inline-block;
      padding:6px 12px;
      border-radius:999px;
      border:1px solid var(--rec-btn-border);
      background:var(--rec-btn-bg);
      color:#0b1120;
      text-decoration:none;
      font-size:.85rem;
      font-weight:600;
      box-shadow:0 8px 18px rgba(15,23,42,.8);
    }
    .rec-actions a:hover{
      box-shadow:0 10px 22px rgba(15,23,42,.95);
      transform:translateY(-1px);
    }

    /* === Per-type colour schemes ========================== */
    /* ===  =========================== */

    /* 1) Photo Albums – blue */
    .rec-card--albums{
      --rec-border:#3b82f6;
      --rec-tag-bg:rgba(59,130,246,.18);
      --rec-tag-color:#dbeafe;
      --rec-btn-bg:#60a5fa;
      --rec-btn-border:#bfdbfe;
    }

    /* 2) Panoramic Views – teal */
    .rec-card--panos{
      --rec-border:#0f766e;
      --rec-tag-bg:rgba(15,118,110,.2);
      --rec-tag-color:#ccfbf1;
      --rec-btn-bg:#14b8a6;
      --rec-btn-border:#5eead4;
    }

    /* 3) 360° Views – amber/orange */
    .rec-card--360{
      --rec-border:#d97706;
      --rec-tag-bg:rgba(217,119,6,.22);
      --rec-tag-color:#ffedd5;
      --rec-btn-bg:#fbbf24;
      --rec-btn-border:#fed7aa;
    }

    /* 4) Virtual Tours – emerald/green */
    .rec-card--tours{
      --rec-border:#059669;
      --rec-tag-bg:rgba(5,150,105,.22);
      --rec-tag-color:#bbf7d0;
      --rec-btn-bg:#34d399;
      --rec-btn-border:#a7f3d0;
    }

    /* 5) Pages – emerald/green */
    .rec-card--pages{
      --rec-border:#059669;
      --rec-tag-bg:rgba(150, 5, 116, 0.22);
      --rec-tag-color:#bbf7d0;
      --rec-btn-bg:#34d399;
      --rec-btn-border:#a7f3d0;
    }
    

    /* 6) Regions – emerald/green */
    .rec-card--regions{
      --rec-border:#059669;
      --rec-tag-bg:rgba(48, 5, 150, 0.22);
      --rec-tag-color:#bbf7d0;
      --rec-btn-bg:#34d399;
      --rec-btn-border:#a7f3d0;
    }